/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}html,body {
    font-family: "poppins", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height:1.3;
}

#site_header {
    position:relative;
    margin:0;
    padding:0;
    background:#000000;
}
@media screen and (min-width:960px) {
    #site_header { position:fixed; left:0; top:0; right:0; z-index:1000; }
    main { padding-top:60px; }
}

#brand_logo_link {
    display:inline-block;
    vertical-align:middle;
    padding:12px;
}

/* Adjust brand logo link to account for hamburger when present */
#site_header .hamburger-menu-toggle ~ #brand_logo_link {
    margin-left: 60px;
}
#brand_logo {
    display:inline-block;
    vertical-align:middle;
    width:128px;
    height:48px;
}
.logo_spacer {
    display:inline-block;
    vertical-align:middle;
    margin: 0 1em; width:1px;
    height:48px;
    background:#555555;
}
#site_logo {
    overflow:hidden;
    display:inline-block;
    vertical-align:middle;
    height:48px;
    white-space:pre;
    /* text-indent:100%; */
}
#user_nav {
    overflow:hidden;
    position:absolute; right:0; top:0;
    height:72px;
}
#user_nav:hover {
    overflow:visible;
}
#user_nav_options {
    position:absolute; right:0; top:72px;
    background:#ffffff;
}
#user_nav:hover #user_nav_options,
#user_nav_options:hover {
    background:#ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
#user_nav_options a {
    display:block;
    border-bottom:1px solid #eeeeee;
    padding:1em 1.5em;
    white-space:pre;
    text-decoration:none;
    cursor:pointer;
    color:#555555;
}
#user_nav_options a:hover {
    background:#f4f4f4;
}
#user_nav_options a.current {
    background:#f5eeda;
    color:#000000;
}

#user_login,
#user_photo {
    overflow:hidden;
    display:inline-block;
    width:48px; height:48px;
    min-width:72px;
    width:72px; height:72px;
    line-height:72px;
    white-space:pre;
    text-indent:100%;
    background:url("../images/brand/material_icon_account_circle.svg") no-repeat center center;
    background-size:32px;
    color:#ffffff;
    cursor:pointer;
}
#user_photo.has-avatar {
    text-indent:0;
    background:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.header-avatar {
    width:48px !important;
    height:48px !important;
    border-radius:50%;
    object-fit:cover;
}
#user_login { background:url("../images/brand/material_icon_login.svg") no-repeat center center; background-size:32px; }
#user_nav:hover #user_login,
#user_nav:hover #user_photo { background-color:#444444; }

/* #user_nav.anon #user_login,
#user_nav_options.anon {
    display:inline-block;
    float:right;
    position:relative; right:0; top:0;
} */

@media screen and (min-width:1024px) {
    #user_nav:hover { overflow:visible; }
    #user_nav_options {
        position:absolute; right:0; top:72px;
    }
}

#login-forms {
    align-items: stretch;
}
#login-form-email { grow:1; flex-grow:1; align-self: stretch; }
#login-form-accounts { align-self: stretch; }
@media screen and (min-width:1024px) {
    #login-forms { display:flex; flex-grow:1; gap:10px; width:100%;}
}


/* Hamburger Menu Toggle */
.hamburger-menu-toggle {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    background: #555555;
    border: none;
    border-radius: 4px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: background-color 0.2s ease;
    padding: 0;
    vertical-align: middle;
}

.hamburger-menu-toggle:hover {
    background: #666666;
}

.hamburger-menu-toggle.active {
    background: #444444;
}

/* Icon Switching Animation */
.hamburger-menu-toggle .hamburger-icon,
.hamburger-menu-toggle .back-arrow-icon {
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: absolute;
    transition-delay: 0.3s;
}

/* Default state: show hamburger, hide arrow (menu closed) */
.hamburger-menu-toggle.active .hamburger-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0s;
}

.hamburger-menu-toggle.active .back-arrow-icon {
    opacity: 0;
    transform: scale(0.7) rotate(-180deg);
    transition-delay: 0s;
}

/* Menu open state: hide hamburger, show arrow with delay */
.hamburger-menu-toggle:not(.active) .hamburger-icon {
    opacity: 0;
    transform: scale(0.7) rotate(180deg);
    transition-delay: 0s;
}

.hamburger-menu-toggle:not(.active) .back-arrow-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    transition-delay: 0.3s;
}

.hamburger-menu-toggle svg {
    width: 24px;
    height: 24px;
}


#quicklaunch {
    background:#555555;
    border-radius:4px;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#quicklaunch.hidden {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

/* Mobile styles */
@media screen and (max-width:959px) {
    #quicklaunch {
        position: relative;
        margin: 0;
        width: 100%;
        max-height: none;
        overflow-y: visible;
    }

    /* Hide by default on mobile - override desktop behavior */
    #quicklaunch.hidden {
        display: none !important;
    }

    /* Show when active */
    #quicklaunch:not(.hidden) {
        display: block !important;
    }

    /* Don't push main content on mobile */
    body.with-quicklaunch > main,
    body.authenticated.with-quicklaunch main,
    body.authenticated:not(.with-quicklaunch) main {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Don't adjust header on mobile */
    body.authenticated.with-quicklaunch #site_header,
    body.authenticated:not(.with-quicklaunch) #site_header {
        left: 0 !important;
        width: 100% !important;
    }

    /* Don't adjust footer on mobile */
    body.authenticated footer,
    body.authenticated:not(.with-quicklaunch) footer {
        left: 0 !important;
        width: 100% !important;
    }

    /* Close button - visible on all screen sizes */
    .mobile-close-btn {
        display: block;
        position: absolute;
        top: 18px;
        right: 24px;
        background: transparent;
        border: none;
        color: #ffffff;
        padding: 8px;
        cursor: pointer;
        border-radius: 4px;
        transition: background 0.2s ease;
        width: 32px;
        height: 32px;
        font-size: 20px;
        font-weight: bold;
        z-index: 10;
    }

    .mobile-close-btn:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Ensure some space above footer */
    footer {
        margin-top: 2em;
    }
}


/* Desktop styles */
@media screen and (min-width:960px) {
    #quicklaunch {
        position:fixed;
        left:1em;
        top:96px;
        width:200px;
        max-height:calc(100vh - 120px);
        overflow-y:auto;
    }
    #quicklaunch.hidden {
        transform: translateX(-220px);
    }
}
#quicklaunch a {
    display:flex;
    align-items:center;
    gap:0.75em;
    padding:1em 1em;
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    color:#cccccc;
    font-size:14px;
    line-height:1.4;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Quick Launch Icon */
.quick-launch-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    border-radius:50%;
    background-color:#4CAF50;
    flex-shrink:0;
}

.quick-launch-icon svg {
    width:16px;
    height:16px;
    color:#ffffff;
    stroke:#ffffff;
    fill:#ffffff;
}

#quicklaunch a.current .quick-launch-icon {
    background-color:#2E7D32;
}
#quicklaunch a:hover {
    background:#666666;
    color:#ffffff;
}
#quicklaunch a.current {
    background:#f5eeda;
    color:#000000;
    font-weight:500;
}

/* Admin section header */
#quicklaunch center {
    color:#cccccc;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
    padding:0.5em 1em;
    border-top:1px solid #777777;
    margin-top:0.5em;
}

/* Survey Builder Page */
.survey-builder-page {
    min-height:80vh;
    padding:3em 0;
}

.survey-builder-page h1 {
    text-align:center;
    color:#ffffff;
    font-size:2.5em;
    margin-bottom:2em;
    font-weight:300;
}

.survey-options {
    display:flex;
    gap:2em;
    justify-content:center;
    flex-wrap:nowrap;
    max-width:1400px;
    margin:0 auto;
}

.survey-option-card {
    flex:1;
    min-width:250px;
    max-width:none;
    min-height:450px;
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    transition:all 0.3s ease;
    position:relative;
    overflow:hidden;
}

.survey-option-card:hover {
    transform:translateY(-5px);
    box-shadow:0 8px 30px rgba(0,0,0,0.15);
}

.survey-option-card.coming-soon {
    opacity:0.6;
    cursor:not-allowed;
}

.survey-option-card.coming-soon:hover {
    transform:none;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.card-content {
    padding:2em 1.5em 1.5em 1.5em;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    height:100%;
    box-sizing:border-box;
}

.card-icon {
    color:#666666;
    margin-bottom:1.5em;
    display:flex;
    justify-content:center;
}

.survey-option-card.active .card-icon {
    color:#007bff;
}

.card-content h3 {
    color:#333333;
    font-size:1.5em;
    margin-bottom:1em;
    font-weight:600;
}

.card-content p {
    color:#666666;
    line-height:1.6;
    margin-bottom:1.5em;
    flex-grow:1;
}

.coming-soon-badge {
    background:#ff9500;
    color:#ffffff;
    padding:0.5em 1em;
    border-radius:20px;
    font-size:0.9em;
    font-weight:600;
    display:inline-block;
}

.card-button {
    background:#007bff;
    color:#ffffff;
    padding:1em 2em;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:background 0.3s ease;
    display:inline-block;
}

.card-button:hover {
    background:#0056b3;
    color:#ffffff;
}

/* Setup Cards */
.setup-cards {
    display:flex;
    gap:2em;
    margin-bottom:3em;
}

.setup-card {
    flex:1;
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
    overflow:hidden;
}

.setup-card-header {
    background:#f8f9fa;
    padding:1.5em 2em;
    border-bottom:1px solid #e9ecef;
    display:flex;
    align-items:center;
    gap:1em;
}

.setup-card-icon {
    color:#007bff;
}

.setup-card-header h3 {
    color:#333333;
    font-size:1.2em;
    font-weight:600;
    margin:0;
}

.setup-card-content {
    padding:2em;
}

.setup-card .field.inset input,
.setup-card .field.inset textarea,
.setup-card .field.inset select {
    color:#333333 !important;
}

.setup-card input[name="survey_name"],
.setup-card textarea[name="survey_description"] {
    color:#333333 !important;
}

.setup-card .field label,
.setup-card .field label span,
.setup-card .field.inset label span {
    color:#333333 !important;
}

.setup-card .field-description {
    color:#666666;
    font-size:0.9em;
    margin-bottom:1.5em;
}

.setup-card .checkbox-group {
    gap:1em;
}

.setup-card .checkbox-item {
    margin-bottom:1em;
}

.setup-card .checkbox-content small {
    font-size:0.8em;
}

/* Team Members */
.team-members {
    margin-bottom:1.5em;
}

.team-member {
    display:flex;
    align-items:center;
    gap:1em;
    padding:1em;
    background:#f8f9fa;
    border-radius:8px;
    margin-bottom:0.5em;
}

.team-member-avatar {
    width:40px;
    height:40px;
    background:#ffffff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #e9ecef;
    color:#666666;
}

.team-member-info {
    flex:1;
}

.team-member-name {
    font-weight:600;
    color:#333333;
    font-size:0.95em;
}

.team-member-role {
    color:#666666;
    font-size:0.85em;
    margin-top:0.2em;
}

.add-user-button {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0.5em !important;
    width:100% !important;
    padding:1em !important;
    background:#ffffff !important;
    border:2px dashed #007bff !important;
    border-radius:8px !important;
    color:#007bff !important;
    font-weight:600 !important;
    cursor:pointer !important;
    transition:all 0.3s ease !important;
    text-align:center !important;
    flex-direction:row !important;
}

.add-user-button .add-user-icon {
    flex-shrink:0 !important;
    order:1 !important;
}

.add-user-button .add-user-text {
    order:2 !important;
    flex-shrink:0 !important;
}

.add-user-button:hover {
    background:#f8f9fa;
    border-color:#0056b3;
    color:#0056b3;
}

.add-user-icon {
    width:24px;
    height:24px;
    border-radius:50%;
    background:#007bff;
    color:#ffffff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.3s ease;
}

.add-user-button:hover .add-user-icon {
    background:#0056b3;
}

.remove-member-btn {
    background:none;
    border:none;
    color:#dc3545;
    cursor:pointer;
    padding:0.5em;
    border-radius:4px;
    transition:background 0.3s ease;
}

.remove-member-btn:hover {
    background:#f8f9fa;
}

/* Modal Styles - Figma Dark Theme */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: none !important;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display:flex !important;
}

/* Specifically target delete modal */
#deleteModal {
    display:none !important;
}

#deleteModal.show {
    display:flex !important;
}

/* Allow compliance modal to be shown when opened */
#complianceConfirmationModal {
    display:none !important;
}

#complianceConfirmationModal.show {
    display:flex !important;
}

.modal-content {
    background:#ffffff;
    border-radius:12px;
    box-shadow:0 10px 40px rgba(0,0,0,0.2);
    width:90%;
    max-width:600px;
    max-height:80vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.modal-header {
    padding:1.5em 2em;
    border-bottom:1px solid #e9ecef;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.modal-header h3 {
    color:#333333;
    font-size:1.3em;
    font-weight:600;
    margin:0;
}

.modal-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pc-green-1, #6dd9c5);
}

.modal-body {
    padding:2em;
    flex:1;
    overflow-y:auto;
}

.search-box {
    position:relative;
    margin-bottom:2em;
}

.search-box input {
    width:100%;
    padding: 0.75rem 2.5rem 0.75rem 0.75rem;
    border: none;
    border-radius: 25px;
    font-size: 0.875rem;
    background: #3a3a3a;
    color: white;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.3s ease;
}

.search-box input:focus {
    outline:none;
    border: none;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
}

.search-icon {
    position:absolute;
    right:1em;
    top:50%;
    transform:translateY(-50%);
    color:#666666;
}

.users-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap:1em;
}

.user-card {
    border:2px solid #e9ecef;
    border-radius:8px;
    transition:all 0.3s ease;
    overflow:hidden;
}

.user-card-main {
    display:flex;
    align-items:center;
    gap:1em;
    padding:1em;
    cursor:pointer;
}

.user-card-access {
    padding:1em;
    border-top:1px solid #f1f3f4;
    background:#f8f9fa;
}

.user-card-access label {
    display:flex;
    align-items:center;
    gap:0.5em;
    font-size:0.9em;
}

.user-card-access span {
    color:#666666;
    font-weight:500;
    min-width:80px;
}

.access-level-select {
    flex:1;
    padding:12px 16px;
    height:48px;
    border:1px solid #e9ecef;
    border-radius:4px;
    background:#ffffff;
    color:#333333;
    font-size:0.9em;
    box-sizing:border-box;
}

.user-card:hover {
    border-color:#007bff;
}

.user-card:hover .user-card-main {
    background:#f8f9fa;
}

.user-card.selected {
    border-color:#007bff;
}

.user-card.selected .user-card-main {
    background:#e3f2fd;
}

.user-card-avatar {
    width:40px;
    height:40px;
    background:#f8f9fa;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666666;
    border:2px solid #e9ecef;
}

.user-card.selected .user-card-avatar {
    background:#007bff;
    color:#ffffff;
    border-color:#007bff;
}

.user-card-info {
    flex:1;
}

.user-card-name {
    font-weight:600;
    color:#333333;
    font-size:0.95em;
}

.user-card-role {
    color:#666666;
    font-size:0.8em;
    margin-top:0.2em;
}

.user-card-checkbox {
    width:20px;
    height:20px;
}

.checkbox-circle {
    width:20px;
    height:20px;
    border:2px solid #e9ecef;
    border-radius:50%;
    transition:all 0.3s ease;
    position:relative;
}

.user-card.selected .checkbox-circle {
    border-color:#007bff;
    background:#007bff;
}

.user-card.selected .checkbox-circle::after {
    content:'';
    position:absolute;
    left:6px;
    top:2px;
    width:6px;
    height:10px;
    border:solid #ffffff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.modal-footer {
    padding:1.5em 2em;
    border-top:1px solid #e9ecef;
    display:flex;
    gap:1em;
    justify-content:flex-end;
}

.empty-state,
.loading-state,
.error-state {
    grid-column:1 / -1;
    text-align:center;
    padding:3em 2em;
    color:#666666;
}

.loading-state {
    color:#007bff;
}

.error-state {
    color:#dc3545;
}

/* Survey Wizard Placeholder Content */
.placeholder-content {
    text-align:center;
    padding:4em 2em;
    background:#f8f9fa;
    border-radius:12px;
    margin:2em 0;
}

.placeholder-icon {
    color:#007bff;
    margin-bottom:1em;
}

.placeholder-content h4 {
    color:#333333;
    font-size:1.3em;
    margin-bottom:0.5em;
}

.placeholder-content p {
    color:#666666;
    font-size:1em;
}

/* Summary Cards */
.summary-cards {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:2em;
    margin:2em 0;
}

.summary-card {
    background:#ffffff;
    border:1px solid #e9ecef;
    border-radius:8px;
    padding:1.5em;
}

.summary-card h4 {
    color:#333333;
    font-size:1.1em;
    font-weight:600;
    margin-bottom:1em;
    border-bottom:2px solid #007bff;
    padding-bottom:0.5em;
}

.summary-card ul {
    list-style:none;
    padding:0;
    margin:0;
}

.summary-card li {
    padding:0.5em 0;
    border-bottom:1px solid #f1f3f4;
}

.summary-card li:last-child {
    border-bottom:none;
}

.access-level {
    color:#666666;
    font-size:0.9em;
    font-style:italic;
}

.finalize-actions {
    margin:2em 0;
    text-align:center;
}

.finalize-note {
    color:#666666;
    font-size:0.9em;
    margin-top:1em;
}

.inline-form {
    display:inline-block;
    margin-bottom:1em;
}

@media screen and (max-width:768px) {
    .modal-content {
        width:95%;
        max-height:90vh;
    }

    .modal-header,
    .modal-body,
    .modal-footer {
        padding:1em 1.5em;
    }

    .users-grid {
        grid-template-columns:1fr;
    }

    .summary-cards {
        grid-template-columns:1fr;
        gap:1.5em;
    }

    .placeholder-content {
        padding:2em 1em;
    }
}

@media screen and (max-width:768px) {
    .survey-options {
        flex-direction:column;
        align-items:center;
    }

    .survey-option-card {
        min-width:280px;
        max-width:400px;
    }

    .survey-builder-page h1 {
        font-size:2em;
        padding:0 1em;
    }

    .setup-cards {
        flex-direction:column;
        gap:1.5em;
    }

    .setup-card-header {
        padding:1em 1.5em;
    }

    .setup-card-content {
        padding:1.5em;
    }
}

/* Survey Wizard */
.survey-wizard {
    min-height:80vh;
    padding:0.5em 0 2em 0;
    margin-top: 0 !important;
}

.survey-wizard h1 {
    text-align:center;
    color:#ffffff;
    font-size:2.2em;
    margin-top:0;
    margin-bottom:1.5em;
    font-weight:300;
}

/* Survey Breadcrumbs - Exact Figma Design */
.survey-breadcrumbs {
    margin-bottom: 60px;
    padding: 0 24px;
    position: relative;
    border-bottom: 1px solid var(--pc-grey-1, #323232);
}

.breadcrumb-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 800px;
    margin: 0 auto;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.breadcrumb-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pc-grey-2, #707070);
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
    padding: 24px 36px;
    position: relative;
    text-shadow: 0px 0px 150px rgba(255, 255, 255, 0.75);
}

.breadcrumb-step.completed {
    color: var(--pc-grey-2, #707070);
    font-weight: 600;
}

.breadcrumb-step.current {
    color: #ffffff !important;
    font-weight: 700;
    border-bottom: 3px solid var(--pc-green-1, #6dd9c5);
}

.breadcrumb-step.current .step-name {
    color: #ffffff !important;
}

.breadcrumb-step.upcoming {
    color: var(--pc-grey-2, #707070);
}

.step-number {
    display: none;
}

.step-name {
    white-space: nowrap;
}

.breadcrumb-separator {
    width: 10px;
    height: 16px;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L8 8L2 14' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.breadcrumb-separator.completed {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='16' viewBox='0 0 10 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L8 8L2 14' stroke='%236dd9c5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.breadcrumb-separator::after {
    display: none;
}

/* Clickable breadcrumb links */
a.breadcrumb-step {
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

a.breadcrumb-step:hover {
    color: var(--pc-green-1);
}

a.breadcrumb-step.completed:hover {
    color: var(--pc-green-1);
}

/* Survey Setup Content - Exact Figma Design */
.setup-main-content {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 0 24px;
    margin: 0 auto 60px auto;
    position: relative;
    max-width: 1090px;
    justify-content: center;
}

/* Override all text colors in setup cards - Higher specificity than .survey-wizard */
.survey-wizard .setup-card-figma,
.survey-wizard .setup-card-figma *,
.survey-wizard .setup-card-team,
.survey-wizard .setup-card-team *,
.survey-wizard .setup-compliance-section,
.survey-wizard .setup-compliance-section *,
.survey-wizard .setup-card-figma p,
.survey-wizard .setup-card-figma h3,
.survey-wizard .setup-card-figma label,
.survey-wizard .setup-card-figma span,
.survey-wizard .setup-card-team p,
.survey-wizard .setup-card-team h3,
.survey-wizard .setup-card-team label,
.survey-wizard .setup-card-team span,
.survey-wizard .setup-compliance-section p,
.survey-wizard .setup-compliance-section h3,
.survey-wizard .setup-compliance-section label,
.survey-wizard .setup-compliance-section span {
    color: #ffffff !important;
}

/* Override input and textarea colors specifically */
.survey-wizard .setup-input-figma,
.survey-wizard .setup-textarea-figma,
.survey-wizard input.setup-input-figma,
.survey-wizard textarea.setup-textarea-figma {
    color: var(--pc-grey-1, #323232) !important;
}

.survey-wizard .setup-card-title,
.survey-wizard .setup-card-figma .setup-card-title,
.survey-wizard .setup-card-team .setup-card-title {
    color: var(--pc-green-1, #6dd9c5) !important;
}

.survey-wizard .setup-card-required,
.survey-wizard .setup-card-figma .setup-card-required,
.survey-wizard .setup-card-team .setup-card-required {
    color: #fb5753 !important;
}

.survey-wizard .setup-team-member-role {
    color: var(--pc-green-1, #6dd9c5) !important;
}

.survey-wizard .setup-compliance-option.no {
    color: var(--pc-grey-2, #707070) !important;
}

.survey-wizard .setup-compliance-option.yes {
    color: var(--pc-green-1, #6dd9c5) !important;
}

/* Force page title to be white - Maximum specificity */
.survey-wizard .centring h1,
.survey-wizard h1,
.centring h1,
div.survey-wizard div.centring h1,
h1[style] {
    color: #ffffff !important;
    margin-top: 0 !important;
}

/* Setup form button styling - Match Add User button exactly */
.survey-wizard .form-actions .button.primary {
    background: rgba(109, 217, 197, 0.25) !important;
    border: none !important;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5) !important;
    border-radius: 10px !important;
    /* padding: 24px !important; */
    height: 50px !important;
    width: auto !important;
    min-width: 200px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--pc-grey-4, #f5f5f5) !important;
    text-transform: uppercase !important;
}

.survey-wizard .form-actions .button.primary:hover {
    background: rgba(109, 217, 197, 0.35) !important;
}

.survey-wizard .form-actions .button.ghost {
    background: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    border-radius: 12px !important;
    padding: 10px 22px !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.survey-wizard .form-actions .button.ghost:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.setup-card-figma {
    background: rgba(14, 15, 17, 0.5);
    border: 2px solid var(--pc-grey-1, #323232);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-card-details {
    width: 356px;
    flex-shrink: 0;
}

.setup-card-header-figma {
    text-align: center;
}

.setup-card-title {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: var(--pc-green-1, #6dd9c5) !important;
    margin: 0;
}

.setup-card-required {
    color: #fb5753;
}

.setup-form-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setup-field-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setup-field-label {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff !important;
    margin: 0;
}

.setup-input-figma {
    background: var(--pc-grey-4) !important;
    border: 2px solid var(--pc-grey-1, #323232);
    border-radius: 10px;
    padding: 12px;
    height: 50px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: var(--pc-grey-1, #323232) !important;
}

.setup-textarea-figma {
    background: var(--pc-grey-4) !important;
    border: 2px solid var(--pc-grey-1, #323232);
    border-radius: 10px;
    padding: 12px;
    height: 200px;
    width: 100%;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: var(--pc-grey-1, #323232) !important;
    resize: none;
}

.setup-input-figma::placeholder,
.setup-textarea-figma::placeholder {
    font-style: italic;
    color: var(--pc-grey-1, #323232);
}

.setup-right-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1;
}

.setup-top-row {
    display: flex;
    gap: 24px;
    justify-content: flex-start;
    align-items: flex-start;
}

.setup-card-distribution {
    flex-shrink: 0;
    width: 282px;
}

.setup-card-distribution.full-width {
    width: 100%;
}

.setup-card-team {
    background: rgba(14, 15, 17, 0.5);
    border: 2px solid var(--pc-grey-1, #323232);
    border-radius: 20px;
    padding: 24px;
    height: 244px;
    width: 356px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.setup-distribution-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setup-distribution-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.setup-distribution-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.setup-distribution-label {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff !important;
    margin: 0;
}

.setup-toggle {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
    background: var(--pc-grey-1, #323232);
    border-radius: 100px;
    cursor: pointer;
}

.setup-toggle.active {
    background: rgba(109, 217, 197, 0.25);
}

.setup-toggle-slider {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: var(--pc-grey-2, #707070);
    border-radius: 100px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.setup-toggle.active .setup-toggle-slider {
    transform: translateX(25px);
    background: var(--pc-green-1, #6dd9c5);
}

.setup-distribution-separator {
    width: 100%;
    height: 2px;
    background: var(--pc-grey-1, #323232);
    border-radius: 10px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
}

.setup-team-member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--pc-grey-1, #323232);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
}

.setup-team-member-name {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-grey-4, #f5f5f5) !important;
    margin: 0;
}

.setup-team-member-role {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: var(--pc-green-1, #6dd9c5) !important;
    margin: 0;
}

/* Generic primary button class */
.button-primary {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-grey-4, #f5f5f5) !important;
    text-transform: uppercase;
    margin: 0;
}
.button.primary:hover {
    background: rgba(109, 217, 197, 0.35);
}

/* Alternative class name for button-primary */
.button-primary {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    padding: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-grey-4, #f5f5f5) !important;
    text-transform: uppercase;
    margin: 0;
}
.button-primary:hover {
    background: rgba(109, 217, 197, 0.35);
}

.setup-add-user-button {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    padding: 24px;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.setup-add-user-button:hover {
    background: rgba(109, 217, 197, 0.35);
}

.setup-add-user-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-grey-4, #f5f5f5) !important;
    text-transform: uppercase;
    margin: 0;
}

.setup-compliance-section {
    background: rgba(14, 15, 17, 0.5);
    border: 2px solid var(--pc-grey-1, #323232);
    border-radius: 20px;
    padding: 20px 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

.setup-compliance-text {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff !important;
    width: 400px;
    line-height: 1.5;
    margin: 0;
}

.setup-compliance-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.setup-compliance-option {
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    margin: 0;
}

.setup-compliance-option.no {
    font-weight: 600;
    color: var(--pc-grey-2, #707070) !important;
}

.setup-compliance-option.yes {
    font-weight: 700;
    color: var(--pc-green-1, #6dd9c5) !important;
}

/* Responsive Design for Setup Layout */
@media (max-width: 1200px) {
    .setup-main-content {
        flex-direction: column;
        gap: 24px;
        max-width: 100%;
        padding: 0 16px;
    }

    .setup-card-details {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .setup-right-section {
        width: 100%;
        max-width: none;
        margin: 0;
    }

    .setup-top-row {
        flex-direction: column;
        gap: 24px;
    }

    .setup-card-distribution {
        width: 100%;
    }

    .setup-card-team {
        width: 100%;
        height: auto;
    }

    .setup-compliance-section {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .setup-main-content {
        padding: 0 12px;
        gap: 20px;
    }

    .setup-card-figma,
    .setup-card-team,
    .setup-compliance-section {
        padding: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    .setup-card-title {
        font-size: 18px;
    }

    .setup-field-label,
    .setup-distribution-label {
        font-size: 13px;
    }

    .setup-compliance-text {
        font-size: 14px;
        width: 100%;
        max-width: none;
    }

    .setup-compliance-controls {
        flex-shrink: 0;
        min-width: 120px;
    }

    .setup-compliance-section {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .setup-compliance-section {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .setup-compliance-controls {
        align-self: center;
    }
}

/* Table Results Info */
.table-results-info {
    margin-bottom: 1rem;
    color: #FFF;
    font-size: 14px;
}

/* Pagination Wrapper */
.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.pagination-wrapper .table-results-info {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .pagination-wrapper .table-results-info {
        text-align: center;
        margin-bottom: 0;
    }

    .pagination-nav {
        justify-content: center;
    }
}

/* Pagination Navigation */
.pagination-nav {
    display: flex;
    align-items: center;
}

.pagination-info {
    color: #666666;
    font-size: 14px;
}

/* Wizard Content */
.wizard-content {
    max-width:800px;
    margin:0 auto;
    background:#ffffff;
    border-radius:12px;
    padding:3em;
    box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.survey-form .form-section {
    margin-bottom:3em;
}

.survey-form .form-section:last-of-type {
    margin-bottom:2em;
}

.survey-form h2 {
    color:#333333;
    font-size:1.5em;
    margin-bottom:1.5em;
    font-weight:600;
    border-bottom:2px solid #f0f0f0;
    padding-bottom:0.5em;
}

.field-description {
    color:#666666;
    margin-bottom:1.5em;
    line-height:1.5;
}

.required {
    color:#dc3545;
    font-weight:600;
}

/* Custom Checkbox Group */
.checkbox-group {
    display:flex;
    flex-direction:column;
    gap:1em;
}

.checkbox-item {
    display:flex;
    align-items:flex-start;
    gap:1em;
    padding:1em;
    border:2px solid #e0e0e0;
    border-radius:8px;
    cursor:pointer;
    transition:all 0.3s ease;
    position:relative;
}

.checkbox-item:hover {
    border-color:#007bff;
    background:#f8f9fa;
}

.checkbox-item input[type="checkbox"] {
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.checkbox-custom {
    width:20px;
    height:20px;
    border:2px solid #ddd;
    border-radius:4px;
    background:#ffffff;
    position:relative;
    flex-shrink:0;
    transition:all 0.3s ease;
}

.checkbox-item input[type="checkbox"]:checked + .checkbox-custom {
    background:#007bff;
    border-color:#007bff;
}

.checkbox-item input[type="checkbox"]:checked + .checkbox-custom::after {
    content:"";
    position:absolute;
    left:6px;
    top:2px;
    width:6px;
    height:10px;
    border:solid #ffffff;
    border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.checkbox-content {
    flex:1;
}

.checkbox-content strong {
    display:block;
    color:#333333;
    margin-bottom:0.25em;
    font-weight:600;
}

.checkbox-content small {
    color:#666666;
    font-size:0.9em;
    line-height:1.4;
}

/* Form Actions */
.form-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:2em;
    border-top:1px solid #e0e0e0;
}

@media screen and (max-width:768px) {
    .wizard-content {
        margin:0 1em;
        padding:2em 1.5em;
    }

    .breadcrumb-container {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    .breadcrumb-step {
        font-size: 14px;
        padding: 8px 0;
    }

    .breadcrumb-separator {
        margin: 0 12px;
    }

    .breadcrumb-separator::after {
        font-size: 14px;
        left: 4px;
    }

    .form-actions {
        flex-direction:column;
        gap:1em;
    }

    .form-actions .button {
        width:100%;
        text-align:center;
    }
}


body {
    background:#333333;
}
main {
    box-sizing:border-box;
    min-height:80vh;
    background:#333333;
    color:#ffffff;
}

section {
    padding:2em;
    background:#f4f4f4;
    background:#333333;

background-color: #333333;
background-image: url("data:image/svg+xml,%3Csvg width='84' height='48' viewBox='0 0 84 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h12v6H0V0zm28 8h12v6H28V8zm14-8h12v6H42V0zm14 0h12v6H56V0zm0 8h12v6H56V8zM42 8h12v6H42V8zm0 16h12v6H42v-6zm14-8h12v6H56v-6zm14 0h12v6H70v-6zm0-16h12v6H70V0zM28 32h12v6H28v-6zM14 16h12v6H14v-6zM0 24h12v6H0v-6zm0 8h12v6H0v-6zm14 0h12v6H14v-6zm14 8h12v6H28v-6zm-14 0h12v6H14v-6zm28 0h12v6H42v-6zm14-8h12v6H56v-6zm0-8h12v6H56v-6zm14 8h12v6H70v-6zm0 8h12v6H70v-6zM14 24h12v6H14v-6zm14-8h12v6H28v-6zM14 8h12v6H14V8zM0 8h12v6H0V8z' fill='%23555555' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");

background-color: #333333;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='20' viewBox='0 0 100 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.184 20c.357-.13.72-.264 1.088-.402l1.768-.661C33.64 15.347 39.647 14 50 14c10.271 0 15.362 1.222 24.629 4.928.955.383 1.869.74 2.75 1.072h6.225c-2.51-.73-5.139-1.691-8.233-2.928C65.888 13.278 60.562 12 50 12c-10.626 0-16.855 1.397-26.66 5.063l-1.767.662c-2.475.923-4.66 1.674-6.724 2.275h6.335zm0-20C13.258 2.892 8.077 4 0 4V2c5.744 0 9.951-.574 14.85-2h6.334zM77.38 0C85.239 2.966 90.502 4 100 4V2c-6.842 0-11.386-.542-16.396-2h-6.225zM0 14c8.44 0 13.718-1.21 22.272-4.402l1.768-.661C33.64 5.347 39.647 4 50 4c10.271 0 15.362 1.222 24.629 4.928C84.112 12.722 89.438 14 100 14v-2c-10.271 0-15.362-1.222-24.629-4.928C65.888 3.278 60.562 2 50 2 39.374 2 33.145 3.397 23.34 7.063l-1.767.662C13.223 10.84 8.163 12 0 12v2z' fill='%23222222' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");

background-color: #333333;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23222222' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}
footer {
    padding: 2em 2em 4em 2em;
    min-height:5vh;
    background:#000000;
    color:#cccccc;
}
footer > div,
footer > nav {
    display:inline-block;
    vertical-align:top;
    margin-right:2em;
}
footer a {
    color:#ffffff;
}


fieldset {
    margin: 1em auto;
    border:0;
    padding:2em;
    max-width:42em;
    border-radius:1em;
    background:#ffffff;
    color:#555555;
    box-shadow: 0 4px 6px -2px rgba(0,0,0,0.5);
}
fieldset > h2 {
    margin:0 0 1em 0;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align:center;
}

h1, h2, h3, h4, h5 {
    font-family: "poppins", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.field,
.field.inset {
    display:block;
    position:relative;
    margin-bottom:1.25em;
}

.field.actions {
    overflow:hidden;
    padding-top:1em;
}
.field.actions:last-child { margin-bottom:0; }

.field.actions label {
    display:inline-block;
}
.field.actions > .next {
    float:right;
}
.field.actions > .secondary {
    float:left;
}
.field.actions > .cancel {
    float:left;
    margin-left:1em;
}


.field label {
    display:block;
    position:relative;
    z-index:100;
    box-sizing:border-box;
    width:100%;
}
.field label > span {
    display:inline-block;
    font-family: "poppins", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size:12px;
}
.field.inset label > span {
    display:block;
}
.field.inset label > .block {
    position:relative;
}
.field.inset input[type='text'],
.field.inset input[type='email'],
.field.inset input[type='password'],
.field.inset input[type='number'],
.field.inset select {
    display:block;
    box-sizing:border-box;
    border:0;
    border-bottom:4px solid #eeeeee;
    outline:0;
    padding:0 0.5em;
    border-radius:0.5em 0.5em 0 0;
    padding:12px 16px;
    height:48px;
    line-height:1.4;
    width:100%;
    background:#f4f4f4;
}
.field.inset input[type='text']:focus,
.field.inset input[type='email']:focus,
.field.inset input[type='password']:focus,
.field.inset input[type='number']:focus,
.field.inset select:focus,
input.twofactor:focus {
    outline:0;
    border-bottom-color:#e32b24;
    background:#f5eeda;
}


.icon_wrap { display:inline-block; position:relative; width:50px; height:50px; text-align:center; }

.icon_wrap {
    overflow:hidden;
    position:relative;
    border:0; padding:0;
    width:50px; height:50px;
    border-radius:50px;
    background:none; fill:#21bef3;
}
.icon {
    display:inline-block;
    overflow:hidden;
    position:relative;
    border:0; padding:0;
    width:48px; height:48px;
    border-radius:48px;
    fill:#21bef3;
    background-color:none;
    background-image:none;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:24px;
}
.icon_wrap:hover .icon { background-color:rgba(50,50,50,0.5); }
.icon_wrap > .label {
    position:absolute; left:50%; top:50px;
    box-sizing:border-box;
    margin:0 0 0 -80px; min-width:160px;
    padding:0 1em;
    font-size:12px; line-height:32px;
    background:#333333; color:#999999;
    z-index:100;
    text-align:center;
    text-transform:uppercase;
}
.icon_wrap > .label::before {
    content:" ";
    display:block; position:absolute; left:50%; top:0;
    margin:-8px 0 0 -12px; margin:0 0 0 -12px;
    border:12px solid red;
    border-color:transparent transparent #333333 transparent;
    width:0; height:0;
}
.icon_wrap:hover { overflow:visible; }
.icon_wrap:hover > .label::before { margin-top:-24px; }


.password_visibility.icon_wrap {
    position:absolute; right:4px; bottom:6px; z-index:100;
}
.password_visibility.icon_wrap.is_on .icon { background-image:url("../images/brand/material_icon_visibility_on-k.svg"); }
.password_visibility.icon_wrap.is_off .icon { background-image:url("../images/brand/material_icon_visibility_off-k.svg"); }


.field.twofactor {
    margin-bottom:1em;
}
.field.twofactor > label {
    position:relative; z-index:100;
    display:block;
}
input.twofactor {
    box-sizing:border-box;
    margin:0;
    border:0;
    outline:0;
    padding:0.5em 0.75em;
    width:12em;
    font-family:monospace;
    font-size:1.5em;
    line-height:1;
    letter-spacing:1.325em;
    background:#f4f4f4;
    -moz-appearance: textfield;
}
.field.twofactor_plain input.twofactor {
    box-sizing:border-box;
    margin:0;
    border:0;
    outline:0;
    padding:0.5em 0.75em;
    width:100%;
    font-family:monospace;
    font-size:1.5em;
    line-height:1;
    letter-spacing:1.325em;
    -moz-appearance: textfield;
}
input.twofactor::-webkit-outer-spin-button,
input.twofactor::-webkit-inner-spin-button,
input.twofactor_plain::-webkit-outer-spin-button,
input.twofactor_plain::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.twofactor-spacer-placer {
    position:absolute; left:0; top:0; z-index:120;
}
.twofactor-spacer {
    display:inline-block;
    box-sizing:border-box;
    margin:0;
    border:1px solid #dddddd;
    padding:0.625em 0;
    width:2.1em;
    font-family:monospace;
    font-size:1.5em;
    line-height:1;
    letter-spacing:0.25em;
    background:#f4f4f4;
    background:none;
}
@media screen and (min-width:960px) {
    input.twofactor,
    input.twofactor_plain,
    .twofactor-spacer {
        font-size:2em;
    }
}


button,
a.button {
    display:inline-block;
    border-radius:1em;
    border:0;
    padding:0.5em 1em;
    line-height:1;
    white-space:pre;
    font-family: "poppins", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    cursor:pointer;
    text-decoration:none;
}
button.primary {
    background:#e32b24;
    color:#ffffff; color:rgba(250,250,250,0.9);
}
button.primary:hover {
    background:#d70700;
    color:#ffffff;
}

button.secondary,
a.secondary {
    background:#555555;
    color:#ffffff; color:rgba(250,250,250,0.9);
}
button.secondary:hover,
a.secondary:hover {
    background:#555555;
    color:#ffffff;
}

.field.checkbox label,
button.ghost,
a.button.ghost {
    background:transparent;
    color:#333333;
}
.field.checkbox label:hover,
button.ghost:hover,
a.button.ghost:hover {
    background:#f4f4f4; background:rgba(0,0,0,0.2);
    color:#000000;
}


.field.checkbox label {
    display:inline-block;
    box-sizing:border-box;
    border:0;
    border-radius:1em;
    padding:0.5em 1em;
    width:auto;
    line-height:1;
    font-family: "poppins", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    cursor:pointer;
}
.field.checkbox label > input {
    margin-right:0.5em;
}

section.banner {
    overflow:hidden;
    padding:0;
    background: #333333;
}
section.banner > h1 {
    text-align:center;
    margin:0;
    font-size:3em;
    color:#ffffff;
}
section.banner img {
    display:block;
    margin: 0 auto;
    width:100%;
    max-width:1440px;
}
section.banner p {
    margin: 3em auto;
    max-width:16em;
    text-align:center;
    color:#ffffff;
}
section.banner p strong {
    display:block;
}
@media screen and (min-width:720px) {
    .stackable {
        float:left; width:50%;
    }
    .stackable.row-of-2 {
        float:left; width:50%;
    }
}


section.leader {
    padding-left:0; padding-right:0;
}
section.leader > img { display:block; margin:0 auto; width:auto; max-height:256px; }
section.leader > h1 {
    text-align:center;
    font-size:3em;
    color:#ffffff;
}

.tagline-sets {
    display:flex;
    justify-content: center;
    text-align:center;
}
.tagline {
    font-family: "poppins", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size:1.5em;
    font-weight: 700;
    font-style: normal;
    color:#ffffff;
    padding:1em;
    text-align:center;
    animation-name:tagline_text_loop;
    animation-duration:9s;
    animation-iteration-count: infinite;
    transition:1s ease-in-out color;
}
@media screen and (min-width:960px) {
    .tagline { font-size:2em; }
}
.tagline:nth-child(0) { animation-delay:0s; }
.tagline:nth-child(1) { animation-delay:3s; }
.tagline:nth-child(2) { animation-delay:6s; }

@keyframes tagline_text_loop {
  0% { color:#ffffff; }
  1% { color:#e32b24;  }
  33% { color:#e32b24;  }
  40% { color:#ffffff;  }
  100% { color:#ffffff;  }
}


img {
    max-width:100%;
}



.error-banner {
    padding:3em;
    text-align:center;
}

.alert {
    padding: 1em;
    margin: 1em 0;
    border-radius: 4px;
    text-align: center;
}

.alert.error {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
}

.alert.success {
    background-color: #efe;
    border: 1px solid #cfc;
    color: #3c3;
}

/* Admin User Management Styles */
.user-management {
    padding: 2em 0;
}

.users-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

/* Old users-table styles removed - using new dark theme styles later in CSS */

.users-table .actions {
    white-space: nowrap;
}

.users-table .actions form {
    display: inline;
    margin-left: 0.5em;
}

.role-badge,
.permission-badge {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin: 0.125em;
    border-radius: 3px;
    font-size: 0.875em;
}

.role-badge {
    color: #fff;
    border: 1px solid #fff;
}

.permission-badge {
    background-color: #e1f5fe;
    color: #01579b;
}

.status-badge {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin: 0.125em;
    border-radius: 3px;
    font-size: 0.875em;
    font-weight: 500;
}

.status-badge.active {
    background-color: #d1fae5;
    color: #065f46;
}

.status-badge.disabled {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Survey status styling - no bubble, text colors only */
.survey-status-badge {
    background: none !important;
    padding: 0;
    margin: 0;
    border-radius: 0;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.survey-status-badge.status-active {
    color: #22c55e;
}

.survey-status-badge.status-complete {
    color: #06b6d4;
}

.survey-status-badge.status-draft {
    color: #f59e0b;
}

.survey-status-badge.status-scheduled {
    color: #eab308;
}

.survey-status-badge.status-needs-approval {
    color: #ef4444;
}

.status-badge.attempts {
    background-color: #fef3c7;
    color: #92400e;
    font-size: 0.75em;
}

.permission-badge.small {
    font-size: 0.75em;
    padding: 0.125em 0.375em;
}

.user-form,
.user-details {
    max-width: 600px;
    margin: 2em auto;
}

.user-info-card,
.user-roles-card,
.oauth-info-card {
    margin-bottom: 2em;
}

.info-grid,
.oauth-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1em;
    margin-top: 1em;
}

.info-item,
.oauth-item {
    display: contents;
}

.info-item strong,
.oauth-item strong {
    font-weight: bold;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-top: 0.5em;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.checkbox-item input[type="checkbox"] {
    margin: 0;
}

.roles-section,
.permissions-section,
.all-permissions-section {
    margin-bottom: 1.5em;
}

.roles-section h4,
.permissions-section h4,
.all-permissions-section h4 {
    margin-bottom: 0.5em;
    color: #333;
}

.role-badges,
.permission-list {
    margin-top: 0.5em;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-actions {
    margin-top: 2em;
    padding-top: 1em;
    border-top: 1px solid #ddd;
}

.button.danger {
    background-color: #f44336;
    color: white;
}

.button.danger:hover {
    background-color: #d32f2f;
}

.error-message {
    color: #c33;
    font-size: 0.875em;
    margin-top: 0.25em;
    display: block;
}


.centring {
    margin: 0 auto;
    max-width:1024px;
    width: 100%;
    box-sizing: border-box;
    padding-top: 2rem;
}
@media screen and (min-width:1440px) {
    .centring { max-width:1440px; }
}
@media screen and (max-width: 768px) {
    .centring {
        max-width: 100%;
        padding: 1rem 1rem 0 1rem;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 480px) {
    .centring {
        padding: 1rem 0.75rem 0 0.75rem;
    }
}

/* Survey Question Builder Styles */
.survey-question-builder {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.survey-question-builder:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.survey-question-builder[draggable="true"] {
    cursor: move;
}

.survey-question-builder.drag-over {
    border-color: #2563eb;
    background: #f8fafc;
}

.question-builder-content {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.drag-handle {
    color: #9ca3af;
    cursor: grab;
    font-size: 1.2rem;
    user-select: none;
    padding: 0.5rem 0.25rem;
    flex-shrink: 0;
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle:hover {
    color: #6b7280;
}

.question-input-with-number {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.question-number {
    color: #374151;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    min-width: 20px;
}

.question-form-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.question-main-input {
    width: 100%;
}

.question-text-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 16px;
    color: #374151 !important;
    background: #fff;
    transition: border-color 0.2s ease;
}

.question-text-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.question-text-input::placeholder {
    color: #9ca3af;
}

.question-options {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.question-type-select {
    padding: 12px 16px;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    box-sizing: border-box;
}

.required-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    color: #374151 !important;
    cursor: pointer;
    user-select: none;
}

.required-checkbox input[type="checkbox"] {
    margin: 0;
}

.question-description-field {
    width: 100%;
}

.question-description-field textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #374151 !important;
    background: #fff;
    resize: vertical;
    min-height: 80px;
}

.question-description-field textarea::placeholder {
    color: #9ca3af;
}

/* Question Bank Button Actions - Fix for both index page and modal */
.question-bank-page .question-actions,
.question-bank-modal .question-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.5rem;
    align-items: center;
}

.edit-btn, .delete-btn {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.question-action-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.question-action-btn:hover {
    background: #f3f4f6;
}

.question-action-btn.delete:hover {
    background: #fee2e2;
}

.empty-questions {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.empty-icon {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-questions h4 {
    margin: 0 0 0.5rem 0;
    color: #9ca3af !important;
}

.empty-questions p {
    margin: 0;
    color: #9ca3af !important;
}

/* Simple survey question display */
.survey-question-display {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.survey-question-display .question-number {
    background: #f3f4f6;
    color: #374151;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.survey-question-display .question-content {
    flex: 1;
}

.survey-question-display h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.survey-question-display p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

/* Drag and Drop Styles */
.survey-question-display,
.question-saved-container {
    cursor: grab;
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.survey-question-display:hover,
.question-saved-container:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.survey-question-display:active,
.question-saved-container:active {
    cursor: grabbing;
}

.survey-question-display.dragging,
.question-saved-container.dragging {
    opacity: 0.7 !important;
    transform: rotate(1deg) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2) !important;
    z-index: 1000 !important;
}

.survey-question-display.drag-over-top::before,
.question-saved-container.drag-over-top::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #3b82f6;
    border-radius: 2px;
    z-index: 10;
}

.survey-question-display.drag-over-bottom::after,
.question-saved-container.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 4px;
    background: #3b82f6;
    border-radius: 2px;
    z-index: 10;
}

.drag-handle {
    display: flex;
    align-items: center;
    color: #9ca3af;
    cursor: inherit;
    padding: 4px;
    margin-right: 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    pointer-events: none; /* Allow clicks to pass through to the parent */
}

.survey-question-display:hover .drag-handle {
    color: #6b7280;
    background: #f3f4f6;
}

.sortable-questions {
    min-height: 100px;
}

/* Question Editor Modal Styles - Figma Dark Theme */
.question-editor-modal-content {
    background: var(--pc-grey-1, #323232);
    border: 1px solid rgba(109, 217, 197, 0.2);
    border-radius: 10px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.5);
}

.question-editor-modal-content .modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question-editor-modal-content .modal-header h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--pc-green-1, #6dd9c5);
}

.question-editor-modal-content .modal-body {
    padding: 24px;
}

.question-editor-modal-content .modal-footer {
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Modal Footer Buttons - Figma Theme */
.question-editor-modal-content .modal-footer .button,
.modal-footer .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    height: 44px;
    min-width: 120px;
}

.question-editor-modal-content .modal-footer .button.ghost,
.modal-footer .button.ghost {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

.question-editor-modal-content .modal-footer .button.ghost:hover,
.modal-footer .button.ghost:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
}

.question-editor-modal-content .modal-footer .button.primary,
.modal-footer .button.primary {
    background: rgba(109, 217, 197, 0.25) !important;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5) !important;
    color: var(--pc-green-1, #6dd9c5) !important;
    text-transform: uppercase !important;
}

.question-editor-modal-content .modal-footer .button.primary:hover,
.modal-footer .button.primary:hover {
    background: rgba(109, 217, 197, 0.35) !important;
}

.option-item {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.option-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.option-item .option-input {
    flex: 1;
}

.field-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

/* Fix all white text issues in survey builder */
/* .survey-wizard input,
.survey-wizard textarea,
.survey-wizard select,
.survey-wizard label,
.survey-wizard p,
.survey-wizard h1,
.survey-wizard h2,
.survey-wizard h3,
.survey-wizard h4,
.survey-wizard span {
    color: #374151 !important;
} */

.survey-wizard input::placeholder,
.survey-wizard textarea::placeholder {
    color: #9ca3af !important;
}

.design-section input,
.design-section textarea,
.design-section select,
.design-section label,
.design-section p {
    color: #374151 !important;
}

#questionsContainer input,
#questionsContainer textarea,
#questionsContainer select,
#questionsContainer label {
    color: #374151 !important;
}

/* Add Content Button Styles */
.add-content-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    justify-content: center;
}

.add-content-dropdown {
    position: relative;
}

.add-content-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: #e32b24;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(227, 43, 36, 0.2);
}

.add-content-button:hover {
    background: #d70700;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(227, 43, 36, 0.3);
    transform: translateY(-1px);
}

.add-content-button svg {
    width: 20px;
    height: 20px;
}

.add-content-button span {
    color: #ffffff !important;
}

.add-content-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.add-content-menu.show {
    opacity: 1;
    visibility: visible;
}

.add-content-menu .menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: none;
    border: none;
    border-radius: 6px;
    color: #374151;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    width: 100%;
}

.add-content-menu .menu-item:hover {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    color: #e32b24;
}

.add-content-menu .menu-item svg {
    flex-shrink: 0;
    color: currentColor;
}

.add-content-menu .menu-item span {
    flex: 1;
}

/* Question Bank Modal Styles - Proper Display Control */
#questionBankModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 2000 !important;
}

/* Show modal when .show class is present */
#questionBankModal.show {
    display: flex !important;
}

/* Question Bank Modal - Base styling */
.question-bank-modal {
    background: #1f2937 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    width: 95% !important;
    max-width: 1000px !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    color: #ffffff !important;
}

/* Question Bank Modal - Higher specificity overrides */
#questionBankModal .question-bank-modal {
    background: #1f2937 !important;
    color: #ffffff !important;
}

.modal-overlay#questionBankModal .question-bank-modal {
    background: #1f2937 !important;
    color: #ffffff !important;
}

/* Override any modal-content conflicts that might apply */
#questionBankModal .question-bank-modal,
#questionBankModal.modal-overlay .question-bank-modal,
.modal-overlay#questionBankModal .question-bank-modal,
div#questionBankModal .question-bank-modal {
    background: #1f2937 !important;
    color: #ffffff !important;
}

.question-bank-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #374151;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.question-bank-header h3 {
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.question-bank-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.icon-button {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    color: #9ca3af;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-button:hover {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    color: #e32b24;
}

.question-bank-search {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #374151;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: 1rem;
    color: #9ca3af;
    pointer-events: none;
}

.search-input-wrapper .mic-icon {
    position: absolute;
    right: 1rem;
    color: #9ca3af;
    cursor: pointer;
}

.search-input-wrapper input {
    width: 100%;
    padding-left: 3.5rem;
    /* Extra right padding so text doesn't sit under the clear (X) button */
    padding-right: 2.5rem;
    padding-top: 12px;
    padding-bottom: 12px;
    height: 48px;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
    background: #374151;
    border: 1px solid #4b5563;
    color: #ffffff;
    box-sizing: border-box;
}

.search-input-wrapper input::placeholder {
    color: #9ca3af;
}

.search-input-wrapper input:focus {
    border-color: #6DD9C5;
    box-shadow: 0 0 0 3px rgba(109, 217, 197, 0.1);
}

/* Generic clear (X) button for all search inputs */
.search-input-wrapper .search-clear-btn {
    position: absolute;
    /* Slightly inset from the right edge */
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0.25rem;
    margin: 0;
    cursor: pointer;
    color: #f97373; /* soft red */
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    z-index: 10;
    pointer-events: auto;
    min-width: 20px;
    min-height: 20px;
}

/* Show X when the search input has a value (placeholder is not shown) */
.search-input-wrapper input:not(:placeholder-shown) + .search-clear-btn,
.search-input-wrapper .search-clear-btn[style*="inline-flex"] {
    display: inline-flex !important;
}

.search-input-wrapper .search-clear-btn svg {
    width: 14px;
    height: 14px;
}


.question-bank-content {
    padding: 1.5rem 2rem;
    flex: 1;
    overflow-y: auto;
    color: #ffffff;
}

.question-bank-instructions {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.question-bank-instructions p {
    margin: 0;
    font-size: 1.1rem;
}

.question-bank-loading {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.question-bank-loading p {
    margin: 0;
    font-size: 1.1rem;
}

.question-bank-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #9ca3af;
}

.question-bank-empty p {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
}

.question-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

/* Question Bank Styles for Modal */
.qb-question-options {
    margin: 15px 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

.qb-option-item {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #ffffff;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 4px;
}

.option-indicator {
    width: 12px;
    height: 12px;
    margin-right: 8px;
    flex-shrink: 0;
}

.option-indicator.radio {
    border: 1px solid #ccc;
    border-radius: 50%;
}

.option-indicator.checkbox {
    border: 1px solid #ccc;
    border-radius: 2px;
}

.option-indicator.bullet::before {
    content: "•";
    color: #888;
}

.option-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.option-hidden {
    display: none;
}

.show-more-options {
    margin-top: 8px;
}

.show-more-btn {
    background: none;
    border: none;
    color: #6DD9C5;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    transition: opacity 0.2s ease;
}

.show-more-btn:hover {
    opacity: 0.8;
}

.expand-icon {
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.use-question-btn {
    width: 100%;
    white-space: normal;
}

/* Question answers styles */
.question-answers {
    margin: 10px 0;
}

.answers-label {
    font-size: 12px;
    color: #cccccc;
    margin-bottom: 8px;
}

.answers-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.answer-item {
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    color: #dddddd;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    min-width: 0;
}

.answer-text {
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

/* Question description styles */
.question-description {
    font-size: 14px;
    color: #dddddd;
    margin: 0 0 15px 0;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Required asterisk styles */
.required-asterisk {
    color: #e32b24;
    font-size: 14px;
    font-weight: bold;
    margin-left: 6px;
}

/* Question card styling for modal to match main page */
.question-bank-modal .question-card {
    background: #555555;
    border: 1px solid #666666;
    border-radius: 8px;
    padding: 20px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: #ffffff;
    overflow: hidden;
    word-wrap: break-word;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

.question-meta-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.question-bank-card {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.question-bank-card:hover {
    border-color: #e32b24;
    box-shadow: 0 4px 12px rgba(227, 43, 36, 0.15);
}

.question-bank-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #FEF2F2;
    border-bottom: 1px solid #FEE2E2;
    color: #DC2626;
    font-size: 0.85rem;
    font-weight: 500;
}

.question-bank-card-content {
    padding: 1.5rem;
}

.question-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.placeholder-icon {
    color: #9ca3af;
}

.question-placeholder p {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0;
    text-align: center;
}

.question-bank-card-footer {
    padding: 1rem;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: center;
}

.question-type-badge {
    padding: 0.5rem 1rem;
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.question-type-badge:hover {
    background: #d1d5db;
}

.question-type-badge.text-entry {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    color: #8b6914;
}

.question-type-badge.yes-no {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    color: #8b6914;
}

/* Show warning for SMS delivery if distribution_sms is enabled */
.question-bank-card[data-type="text_entry"] .question-bank-warning.sms-warning {
    display: flex;
}

/* Add Question Modal Styles - Elongated Design */
#addQuestionModal {
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
}

.add-question-modal-elongated {
    background: var(--pc-grey-1, #323232);
    border: 1px solid rgba(109, 217, 197, 0.2);
    border-radius: 10px;
    width: 90%;
    max-width: 900px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.5);
}

.add-question-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.add-question-label {
    color: var(--pc-green-1, #6dd9c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
}

.add-question-form-elongated {
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

@media screen and (max-width: 768px) {
    .add-question-form-elongated {
        padding: 24px;
        display: flex;
        gap: 16px;
        align-items: stretch;
        flex-direction: column;
    }
}

.add-question-form-elongated > div {
    flex-shrink: 0;
}

.question-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.question-text-input-elongated {
    /* width: 100%; */
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-black, #000000);
    background: var(--pc-grey-4, #f5f5f5);
    transition: all 0.2s ease;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
}

.question-text-input-elongated:focus {
    outline: none;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--pc-green-1, #6dd9c5);
}

.question-text-input-elongated::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.question-type-container {
    display: flex;
    flex-direction: column;
}

.question-type-wrapper-elongated {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.question-type-select-elongated {
    padding: 12px 36px 12px 12px;
    height: 40px;
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-black, #000000);
    background: var(--pc-grey-4, #f5f5f5);
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 24px;
    min-width: 200px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    box-sizing: border-box;
}

.question-type-select-elongated:focus {
    outline: none;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--pc-green-1, #6dd9c5);
}

.question-text-input-elongated.error {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5), 0 0 0 2px #dc3545;
}

.question-type-select-elongated.error {
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5), 0 0 0 2px #dc3545;
}

.error-message {
    display: none;
    color: #ff6b6b;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
    padding-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
    padding-right: 8px;
}

.tooltip-button-elongated {
    background: transparent;
    width: 40px;
    height: 40px;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tooltip-button-elongated:hover {
    background: rgba(109, 217, 197, 0.15);
    border-color: var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
}

.sms-warning-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DC2626;
    cursor: pointer;
}

.add-question-actions {
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.cancel-button-elongated,
.save-button-elongated {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    height: 44px;
    min-width: 120px;
}

.cancel-button-elongated {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.cancel-button-elongated:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.save-button-elongated {
    background: rgba(109, 217, 197, 0.25);
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
    text-transform: uppercase;
}

.save-button-elongated:hover {
    background: rgba(109, 217, 197, 0.35);
}

.cancel-button-elongated svg,
.save-button-elongated svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Tooltip Popup Styles - Figma Dark Theme */
.tooltip-popup,
#questionTypesTooltip,
#smsWarningTooltip {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000 !important;
}

/* Question Editor Modal - Dark Theme */
#questionEditorModal {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
}

/* SMS Length Warning Modal - should appear above Add Question Modal */
#smsLengthWarningModal {
    z-index: 100000 !important;
}

/* Skip Logic Move Warning Modal - should appear above Add Question Modal */
#skipLogicMoveWarningModal {
    z-index: 100000 !important;
}

/* Unsaved Changes Warning Modal - should appear above all other modals */
#unsavedChangesWarningModal {
    z-index: 100000 !important;
}

/* Warning/Confirmation Modals - should appear above question modals */
#textBlockSMSWarningModal,
#cancelOptionsModal,
#cancelEditsModal,
#deleteConfirmationModal,
#maxQuestionsWarningModal,
#rankingWarningModal {
    z-index: 100000 !important;
}

/* Template Modal - Override display none important */
#templateModal {
    z-index: 2000 !important;
}

#templateModal.show {
    display: flex !important;
}

/* Force page break after questions with skip logic in web surveys */
.question-saved-container[data-force-page-break-after="true"] {
    page-break-after: always;
    break-after: page;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

/* For web survey pagination - force next question to new page */
.question-saved-container[data-force-page-break-after="true"] + .question-saved-container {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e5e7eb;
}

.tooltip-content {
    background: var(--pc-grey-1, #323232);
    border: 1px solid rgba(109, 217, 197, 0.2);
    border-radius: 10px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tooltip-content h4 {
    color: var(--pc-green-1, #6dd9c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip-list {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.tooltip-item {
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.tooltip-item:last-child {
    border-bottom: none;
}

.tooltip-item strong {
    color: var(--pc-green-1, #6dd9c5);
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.tooltip-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooltip-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--pc-green-1, #6dd9c5);
}

/* Rating Scale Question Editor Styles */
.question-editor-container {
    position: relative;
    /* background: #ffffff; */
    border: 2px solid #000000;
    border-radius: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.question-editor-container.dragging {
    opacity: 0.5;
}

.question-editor-container:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.drag-handle {
    /* position: absolute; */
    left: 0.75rem;
    top: 1.5rem;
    color: #9CA3AF;
    cursor: grab;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.drag-handle:hover {
    color: #e32b24;
    background-color: #0e0f11; border-color: var(--pc-red-main);
}

.drag-handle:active {
    cursor: grabbing;
}

.question-editor-border {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #FFD700;
    z-index: 1;
}

.question-editor-content {
    padding: 1.25rem;
    padding-left: 3.5rem;
    margin-left: 6px;
    position: relative;
}

.question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0;
}

.question-number-badge {
    background: none;
    color: var(--pc-grey-2, #707070);
    padding: 0;
    border-radius: 0;
    font-weight: 600;
    font-size: 1rem;
}

.question-text-section {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.question-text-input-editor {
    flex: 0 0 auto;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    background: transparent;
    outline: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.question-text-input-editor:focus {
    border-bottom-color: #e32b24;
}

.question-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.question-action-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-action-btn:hover {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    color: #e32b24;
}

.question-action-btn.delete-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

.question-body {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.question-text-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media screen and (max-width: 768px) {
    .question-text-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.question-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-left: auto;
}

.question-action-btn {
    background: none;
    border: none;
    padding: 0.375rem;
    border-radius: 4px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-action-btn:hover {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    color: #e32b24;
}

.question-action-btn.delete-visible-btn:hover {
    background: #fee2e2;
    color: #dc2626;
}

.question-text-input-editor {
    flex: 1;
    padding: 0.75rem;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 1rem;
    color: #374151;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.question-text-input-editor:focus {
    outline: none;
    border-color: #e32b24;
}

.question-text-input-editor::placeholder {
    color: #9ca3af;
}

.required-asterisk {
    color: #dc2626;
    font-weight: 600;
    font-size: 1.2rem;
}

.question-type-badge-editor {
    display: inline-block;
    background: rgba(109, 217, 197, 0.15);
    color: var(--pc-green-1, #6dd9c5);
    padding: 6px 14px;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin-left: 12px;
    border: 1px solid rgba(109, 217, 197, 0.3);
}


@media screen and (max-width: 768px) {

    .question-type-badge-editor {
        margin-left: 0;
    }
}

.rating-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.rating-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rating-option-item {
    display: contents;
}

.rating-option-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 1;
}

.rating-option-item-wrapper .option-radio-icon {
    flex-shrink: 0;
    margin-top: 0.375rem;
}

.rating-option-item-wrapper .rating-option-input {
    flex: 1;
    min-width: 200px;
    /* Allow long option text to wrap to multiple lines instead of overflowing */
    white-space: normal;
    word-break: break-word;
}

.rating-option-item-wrapper .option-error {
    width: 100%;
    margin-left: calc(1.5rem + 0.875rem); /* icon width + gap */
    margin-top: -0.5rem;
}

.option-row-container {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 10px;
}

.option-actions-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 64px;
    flex-shrink: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    margin-top: 0.375rem;
}

.add-option-row {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-left: 2rem;
    margin-top: 0.25rem;
}

.option-radio-icon {
    flex-shrink: 0;
    color: #9ca3af;
}

.rating-option-input {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #374151 !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease;
}

.rating-option-input:focus {
    outline: none;
    border-color: #e32b24;
}

.rating-option-input::placeholder {
    color: #9ca3af;
}

.rating-option-input.error {
    border-color: #DC2626;
}

.option-error {
    color: #DC2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
    margin-left: 2rem;
}

.remove-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid #DC2626;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.remove-option-btn svg {
    stroke: #ffffff;
    flex-shrink: 0;
}

.remove-option-btn:hover {
    background: #B91C1C;
    border-color: #B91C1C;
}

.add-option-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 2px solid #10B981;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.add-option-btn svg {
    stroke: #ffffff;
    flex-shrink: 0;
}

.add-option-btn:hover {
    background: #059669;
    border-color: #059669;
}

.question-editor-actions {
    display: none;
}

.editor-cancel-btn,
.editor-save-btn {
    background: none;
    border: 2px solid #e5e7eb;
    padding: 0.625rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.editor-cancel-btn:hover {
    background-color: #0e0f11; border-color: var(--pc-red-main);
    border-color: #e32b24;
    color: #e32b24;
}

.editor-save-btn {
    background: #e32b24;
    border-color: #e32b24;
    color: #ffffff;
}

.editor-save-btn:hover {
    background: #d70700;
    border-color: #d70700;
}

/* Question Editor Modal Styles */
.question-editor-modal-content {
    background: var(--pc-grey-1, #323232);
    border: 1px solid rgba(109, 217, 197, 0.2);
    border-radius: 10px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 1000px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0;
    position: relative;
}

.question-editor-modal-content .question-editor-container {
    margin: 0;
    border: none;
}

.question-editor-modal-content .question-editor-border {
    display: none;
}

/* Hide the yellow border when question editor is in modal overlay */
.modal-overlay .question-editor-border {
    display: none;
}

.question-editor-modal-content .question-editor-content {
    padding: 1.5rem;
}

.question-editor-modal-content .drag-handle {
    display: none;
}

/* Hide the drag handle when question editor is in modal overlay */
.modal-overlay .drag-handle {
    display: none !important;
}

.modal-overlay .question-editor-container .drag-handle {
    display: none !important;
}

/* Saved Question Styles */
.question-saved-container {
    position: relative;
    background: #ffffff;
    border: 2px solid #000000;
    border-radius: 0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.question-saved-content {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    padding-left: 0;
    gap: 1rem;
    flex: 1;
}

.question-saved-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.question-saved-container .drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9CA3AF;
    cursor: grab;
    padding: 0.5rem 0.75rem;
    margin-right: 0;
    margin-left: 0;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    pointer-events: auto;
}

.question-saved-container .drag-handle:hover {
    color: #6B7280;
    background: #F3F4F6;
}

.question-saved-container .drag-handle:active {
    cursor: grabbing;
}

.question-saved-container .drag-handle svg {
    width: 20px;
    height: 20px;
}

.question-number-badge-saved {
    font-size: 1rem;
    font-weight: 700;
    color: #1F2937;
}

.question-text-saved {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: #1F2937;
}

.question-saved-actions {
    display: flex;
    gap: 0.25rem;
}

.question-action-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    min-width: 32px;
    min-height: 32px;
}

.question-action-btn:hover {
    color: #1F2937;
}

.question-type-badge-saved {
    background: #F3F4F6;
    color: #6B7280;
    padding: 0.375rem 0.875rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.question-options-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.option-preview {
    background: #f8f9fa;
    color: #6b7280;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    border: 1px solid #e5e7eb;
}

.question-meta {
    margin-top: 0.5rem;
}

.meta-item {
    background: #eff6ff;
    color: #1e40af;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Single Select Options Saved List */
.single-select-options-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Multi Select Options Saved List */
.multi-select-options-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Rating Scale Options Saved List */
.rating-scale-options-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Yes/No Options Saved List */
.yes-no-options-saved-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Common saved option styles (shared across all question types) */
.rating-option-saved {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.option-text-saved {
    font-size: 0.95rem;
    color: #374151;
}

/* Ranking Question Styles */
.ranking-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.ranking-option-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ranking-option-item {
    display: contents;
}

.ranking-option-item-wrapper {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1;
}

.ranking-option-input {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #374151;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.ranking-option-input:focus {
    outline: none;
    border-color: #e32b24;
}

.ranking-option-input::placeholder {
    color: #9ca3af;
}

.drag-handle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    cursor: grab;
    color: #9ca3af;
    transition: color 0.15s ease;
    padding: 0.25rem;
    border-radius: 4px;
}

.drag-handle-icon:hover {
    color: #6b7280;
    background: #f3f4f6;
}

.drag-handle-icon:active {
    cursor: grabbing;
}

.ranking-options-saved-list {
    display: flex;
    flex-direction: column;
}

.ranking-option-saved-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.ranking-option-saved-row:hover {
    background-color: var(--pc-grey-1);
}

.ranking-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.6;
    cursor: default;
}

.ranking-option-text {
    flex: 1;
    font-size: 0.95rem;
    color: var(--pc-grey-3) !important;
}

.ranking-option-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.move-up-btn,
.move-down-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #ffffff;
}

.move-up-btn:hover,
.move-down-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
    color: #374151;
}

.move-up-btn:active,
.move-down-btn:active {
    background: #e5e7eb;
    transform: scale(0.95);
}

.ranking-option-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ranking-option-input-group .option-input {
    flex: 1;
    padding: 0.625rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #374151;
    background: #ffffff;
    transition: border-color 0.2s ease;
}

.ranking-option-input-group .option-input:focus {
    outline: none;
    border-color: #e32b24;
}

.ranking-option-input-group .option-input::placeholder {
    color: #9ca3af;
}

.ranking-option-input-group .move-up-btn,
.ranking-option-input-group .move-down-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    max-width: 32px;
    max-height: 32px;
}

.ranking-option-input-group .remove-option-btn {
    margin-left: 0.25rem;
}

/* Text Entry Question Styles */
.text-entry-validation-section {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #F9FAFB;
    border-radius: 8px;
}

.validation-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.validation-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.validation-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
}

.validation-options {
    margin-top: 0.75rem;
}

.validation-type-select {
    width: 100%;
    padding: 12px 2.5rem 12px 16px;
    height: 48px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #374151;
    background-color: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    box-sizing: border-box;
}

.validation-type-select:focus {
    outline: none;
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

.validation-input-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #374151;
}

.validation-input-container input[type="number"] {
    width: 80px;
    padding: 0.375rem 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
}

.validation-input-container span {
    color: #374151;
    font-size: 0.875rem;
}

.text-entry-input-preview {
    width: -webkit-fill-available;
    padding: 0.5rem 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
    background-color: #F9FAFB;
    cursor: not-allowed;
}

.text-entry-error {
    color: #DC2626;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

select.error, input.error {
    border-color: #DC2626;
}

/* Question editor header styles */
.question-editor-header {
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 24px;
    margin: -24px -24px 24px -24px;
}

.question-editor-header h4 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--pc-green-1, #6dd9c5);
}

/* Modal Form Fields - Figma Dark Theme */
.question-editor-modal-content label,
.question-editor-modal-content label span,
.validation-section label,
.validation-checkbox-container label,
.validation-type-container label,
.validation-input-container label {
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.question-editor-modal-content .field.inset label > span {
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

.question-editor-modal-content input[type="text"],
.question-editor-modal-content input[type="email"],
.question-editor-modal-content input[type="number"],
.question-editor-modal-content select {
    background: var(--pc-grey-4, #f5f5f5) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--pc-black, #000000) !important;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
}

.question-editor-modal-content textarea {
    background: var(--pc-grey-4, #f5f5f5) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--pc-black, #000000) !important;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    height: auto !important;
}

.question-editor-modal-content input[type="text"]:focus,
.question-editor-modal-content input[type="email"]:focus,
.question-editor-modal-content input[type="number"]:focus,
.question-editor-modal-content textarea:focus,
.question-editor-modal-content select:focus {
    outline: none !important;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--pc-green-1, #6dd9c5) !important;
}

.question-editor-modal-content input::placeholder,
.question-editor-modal-content textarea::placeholder {
    color: rgba(0, 0, 0, 0.4) !important;
}

.validation-checkbox-container label,
.validation-type-container label,
.validation-input-container label {
    font-size: 0.875rem;
    font-weight: 500;
}

.character-limit-input {
    width: 80px;
    padding: 0.375rem 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #374151;
}

.character-limit-input:focus {
    outline: none;
    border-color: #FACC15;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);
}

.text-entry-preview-section {
    margin-top: 1rem;
}

/* Question Options Modal Styles - Figma Dark Theme */
.question-options-modal-content {
    background: var(--pc-grey-1, #323232);
    border: 1px solid rgba(109, 217, 197, 0.2);
    border-radius: 10px;
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.5);
}

/* Question Options Modal Header */
.question-options-modal-content .modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.question-options-modal-content .modal-header h3 {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--pc-green-1, #6dd9c5);
}

/* Question Options Modal Body */
.question-options-modal-content .modal-body {
    padding: 24px;
    max-height: calc(80vh - 200px);
    overflow-y: auto;
}

/* Question Options Modal Footer */
.question-options-modal-content .modal-footer {
    padding: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.question-options-modal-content .modal-footer .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    height: 44px;
    min-width: 120px;
}

.question-options-modal-content .modal-footer .button.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.question-options-modal-content .modal-footer .button.ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.question-options-modal-content .modal-footer .button.primary {
    background: rgba(109, 217, 197, 0.25);
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
    text-transform: uppercase;
}

.question-options-modal-content .modal-footer .button.primary:hover {
    background: rgba(109, 217, 197, 0.35);
}

/* Question Options Modal Close Button */
.question-options-modal-content .modal-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.question-options-modal-content .modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.question-options-modal-content .modal-close-btn svg {
    width: 16px;
    height: 16px;
}

/* Question Option Sections */
.question-options-modal-content .question-option-section {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.question-options-modal-content .question-option-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.question-option-item {
    display: flex;
    flex-direction: column;
}

.question-options-modal-content .checkbox-with-tooltip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.question-options-modal-content .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.question-options-modal-content .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--pc-green-1, #6dd9c5);
}

.question-options-modal-content .checkbox-label input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.question-options-modal-content .checkbox-label:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

.question-options-modal-content .tooltip-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.question-options-modal-content .tooltip-icon:hover {
    color: var(--pc-green-1, #6dd9c5);
}

.question-options-modal-content .tooltip-icon svg {
    width: 100%;
    height: 100%;
}

/* Tap/click tooltip bubble for mobile (Question Options modal) */
.pc-tooltip-popover {
    position: fixed;
    display: none;
    z-index: 100000;
    max-width: 280px;
    padding: 10px 12px;
    background: rgba(17, 24, 39, 0.98); /* slate/near-black */
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.pc-tooltip-popover.show {
    display: block;
}

/* Question Option Inputs */
.question-options-modal-content .question-option-input {
    width: -webkit-fill-available !important;
    padding: 12px;
    background: var(--pc-grey-4, #f5f5f5);
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-black, #000000);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
}

.question-options-modal-content .question-option-input:focus {
    outline: none;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--pc-green-1, #6dd9c5);
}

.question-options-modal-content .question-option-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.question-options-modal-content .question-option-input:disabled {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
}

/* Skip Logic Styles - Dark Theme */
.question-options-modal-content .skip-logic-container {
    margin-top: 1rem;
}

.question-options-modal-content .skip-logic-rules-container {
    margin-bottom: 1rem;
}

.question-options-modal-content .skip-logic-rule {
    margin-bottom: 0.75rem;
    padding: 12px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.question-options-modal-content .skip-logic-rule-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.question-options-modal-content .skip-logic-rule-content > span {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}

.question-options-modal-content .skip-logic-response-select,
.question-options-modal-content .skip-logic-question-select {
    flex: 1;
    min-width: 150px;
    padding: 12px 16px;
    height: 48px;
    background: var(--pc-grey-4, #f5f5f5);
    border: none;
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-black, #000000);
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.question-options-modal-content .skip-logic-response-select:focus,
.question-options-modal-content .skip-logic-question-select:focus {
    outline: none;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25), 0 0 0 2px var(--pc-green-1, #6dd9c5);
}

/* Skip Logic Rule Buttons Container */
.question-options-modal-content .skip-logic-rule-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 72px; /* Fixed width for 2 buttons (32px + 8px gap + 32px) */
    flex-shrink: 0;
    justify-content: flex-start;
}

.question-options-modal-content .delete-rule-btn,
.question-options-modal-content .add-rule-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background-color: transparent;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.question-options-modal-content .delete-rule-btn:hover {
    background-color: rgba(227, 43, 36, 0.2);
    border-color: #E32B24;
    color: #E32B24;
}

.question-options-modal-content .add-rule-btn:hover {
    background-color: rgba(109, 217, 197, 0.2);
    border-color: var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
}

.question-options-modal-content .skip-logic-default-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.question-options-modal-content .skip-logic-default-input {
    flex: 1;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: not-allowed;
}

/* Warning Message - Dark Theme */
.question-options-modal-content .warning-message {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 12px;
    background-color: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #fbbf24;
    line-height: 1.4;
}

.question-options-modal-content .warning-message svg {
    flex-shrink: 0;
}

/* Labels in Question Options Modal */
.question-options-modal-content label {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Specific override for unanswered prompt label to ensure white color */
.question-options-modal-content #unansweredPromptContainer label,
#questionOptionsModal label[for="unansweredPrompt"] {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Default Modal Close Button (for other modals) */
.modal-close-btn {
    background: none;
    border: 1px solid #E5E7EB;
    color: #6B7280;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
    color: #374151;
}

.modal-close-btn svg {
    width: 16px;
    height: 16px;
}

.text-entry-preview-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #9CA3AF;
    background-color: #F9FAFB;
    cursor: not-allowed;
}

.text-entry-validation-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: #F3F4F6;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #6B7280;
    margin-top: 0.5rem;
}

.text-entry-response-section {
    margin-top: 0;
    width: calc(100% - 3rem);
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
}

.text-entry-response-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px dashed #D1D5DB;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #9CA3AF;
    background-color: white;
    cursor: not-allowed;
}

/* Text Block Styles */
.text-block-editor-container,
.text-block-saved-container {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    position: relative;
    transition: all 0.2s ease-in-out;
}

.text-block-editor-container:hover,
.text-block-saved-container:hover {
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.text-block-editor-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Text Block Toolbar - Single Line Layout */
.text-block-toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #f9fafb;
}

.toolbar-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
    border-right: 1px solid #e5e7eb;
    padding-right: 0.5rem;
}

.toolbar-group:last-child {
    border-right: none;
    padding-right: 0;
}

/* Updated toolbar button styles */
.toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    color: #4b5563;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.toolbar-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
    color: #1f2937;
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.text-block-editor-area {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    min-height: 100px;
    padding: 0.75rem;
    background-color: #ffffff;
    position: relative;
}

.text-block-content-editor {
    min-height: 80px;
    outline: none;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #374151;
    word-wrap: break-word;
}

.text-block-content-editor:empty:before {
    content: attr(data-placeholder);
    color: #9ca3af;
    pointer-events: none;
    display: block;
}

.text-block-character-count {
    font-size: 0.8rem;
    color: #6b7280;
    text-align: right;
    margin-top: 0.5rem;
}

.text-block-saved-body {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.text-block-content-display {
    flex: 1;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #ffffff;
    word-wrap: break-word;
}

/* Text block in Figma style */
.text-block-card-wrapper .text-block-content-display {
    color: var(--pc-white, #ffffff);
    font-size: 14px;
    line-height: 1.6;
}

.text-block-card-wrapper .text-block-content-display p {
    margin: 0 0 0.5rem 0;
}

.text-block-card-wrapper .text-block-content-display p:last-child {
    margin-bottom: 0;
}

.text-block-preview-text {
    color: var(--pc-white, #ffffff);
    font-size: 14px;
}

.text-block-number-badge {
    background-color: #e5e7eb;
    color: #4b5563;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
}

.text-block-badge {
    background-color: #d1d5db;
    color: #4b5563;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: auto;
}

.option-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #374151 !important;
    background-color: #ffffff !important;
}

.option-input:focus {
    outline: none;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.option-input::placeholder {
    color: #9CA3AF;
}

/* Force visible text for all input elements in question options modals */
.question-editor-container input[type="text"],
/* .modal-content input[type="text"], */
.rating-option-input,
.option-input,
input.rating-option-input,
input.option-input {
    color: #374151 !important;
    background-color: #ffffff !important;
}

/* Ensure placeholder text is also visible */
.question-editor-container input[type="text"]::placeholder,
/* .modal-content input[type="text"]::placeholder, */
.rating-option-input::placeholder,
.option-input::placeholder,
input.rating-option-input::placeholder,
input.option-input::placeholder {
    color: #9CA3AF !important;
}

/* Question metadata indicators */
.question-metadata-indicators {
    display: flex;
    gap: 0.5rem;
    margin: 0.25rem 0;
    flex-wrap: wrap;
}

.metadata-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.metadata-indicator svg {
    flex-shrink: 0;
}

.required-indicator {
    background-color: #FEF2F2;
    color: #DC2626;
    border: 1px solid #FECACA;
}

.other-indicator {
    background-color: #F0FDF4;
    color: #15803D;
    border: 1px solid #BBF7D0;
}

.skip-logic-indicator {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: normal;
}

.duplicate-warning-indicator {
    background-color: #fef3c7;
    color: #d97706;
    border: 1px solid #fed7aa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.duplicate-warning-text {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Skip logic option indicators */
.skip-logic-target {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.125rem 0.25rem;
    background-color: #EFF6FF;
    color: #1D4ED8;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.skip-logic-target svg {
    width: 10px;
    height: 10px;
}

/* Option with skip logic layout */
.option-with-skip-logic {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
}

/* Other option text box placeholder */
.other-text-box {
    margin-left: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 0.25rem;
    background-color: #F9FAFB;
    color: #9CA3AF;
    font-size: 0.875rem;
    position: relative;
}

.other-text-box::before {
    content: 'User input here...';
    color: #9CA3AF;
    font-style: italic;
}

/* Finalize Screen Styles */
.survey-name-header {
    margin-bottom: 2rem;
}

.survey-name-header h2 {
    color: #374151;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0;
}

.finalize-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 968px) {
    .finalize-layout {
        grid-template-columns: 1fr;
    }
}

/* Survey Summary Box */
.survey-summary-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
}

.survey-summary-box h3 {
    color: #374151;
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.attention-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.attention-box h4 {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.warnings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.warning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #374151;
}

.warning-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.details-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 1rem;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.summary-list li {
    padding: 0.5rem 0;
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Right Column */
.finalize-right-column {
    display: flex;
    flex-direction: column;
}

.scheduling-actions-box {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Scheduling Options */
.scheduling-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.toggle-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 160px;
}

.toggle-switch-label {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.toggle-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-visual {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    background-color: #d1d5db;
    border-radius: 12px;
    transition: background-color 0.3s;
}

.toggle-switch-visual::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: white;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch-input:checked + .toggle-switch-visual {
    background-color: #10b981;
}

.toggle-switch-input:checked + .toggle-switch-visual::before {
    transform: translateX(20px);
}

.scheduling-label {
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
}

.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.date-label {
    color: #374151;
    font-size: 0.875rem;
    min-width: 100px;
}

.date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 200px;
}

.date-input {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #374151;
}

.calendar-icon-btn {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: color 0.2s ease;
}

.calendar-icon-btn:hover {
    color: #374151;
}

.calendar-icon-btn:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
    border-radius: 4px;
}

.calendar-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.results-sharing-checkbox {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.save-settings-button {
    margin-top: 1rem;
}

/* Action Buttons Row */
.action-buttons-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

.action-buttons-table {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.action-buttons-row .button {
    width: 100%;
    text-align: center;
}

.button.outline {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.button.outline:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.button.success {
    background: #10b981;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.button.success:hover {
    background: #059669;
}

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

.modal-dialog {
    background: white;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-dialog.alert-dialog {
    max-width: 450px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    margin: 0;
    color: #a0a7b3;
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.modal-close-btn:hover {
    color: #374151;
}

.modal-body {
    padding: 1.5rem;
}

.modal-body label {
    display: block;
    margin-bottom: 0.5rem;
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
}

/* .modal-body input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #374151;
} */

.modal-body p {
    color: #374151;
    margin: 0;
    line-height: 1.5;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.icon-button {
    background: none;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #374151;
    transition: all 0.2s;
}

.icon-button:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.button.primary {
    background: #007bff;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.alert {
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
}

.alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.inline-form {
    display: inline;
}

/* Surveys Index Page Styles */
.surveys-page {
    padding: 2rem 0;
}

/* contacts Index Page Styles */
.contacts-page {
    padding: 2rem 0;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.page-header h1 {
    margin: 0;
    color: #111827;
}

.tabs {
    display: flex;
    gap: 0;
    border-bottom: none;
}

.tab {
    background: none;
    border: none;
    padding: 1rem 20px;
    margin-right: 2rem;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: white;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    min-width: 35%;
}

.tab:hover {
    color: #d1d5db;
    text-decoration: none;
}

.tab.active {
    color: #14b8a6;
    border-bottom-color: #14b8a6;
    font-weight: 600;
    border-radius: 0;
}

.tab:last-child {
    margin-right: 0;
}

.header-actions a {
    width: 100%;
}

/* Tab content styling */
.selected-tab {
    color: #14b8a6;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

.non-selected-tab {
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    font-style: normal;
    line-height: 100%;
    letter-spacing: 0%;
}

.non-selected-tab:hover {
    color: #d1d5db;
}

.filters-section {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.filters-form {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.search-input-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}

.search-input {
    width: 100%;
    padding: 12px 2.5rem 12px 0.75rem;
    height: 48px;
    border: none;
    border-radius: 25px;
    font-size: 0.875rem;
    background: #3a3a3a;
    color: white;
    transition: border-color 0.2s ease;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border: none;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.3);
}

.search-input::placeholder {
    color: #9ca3af;
    font-family: 'Poppins', sans-serif;
}

.filter-dropdowns {
    display: flex;
}

.filter-select {
    padding: 12px 16px;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    background: white;
    min-width: 100%;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.filter-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.apply-btn {
    background-color: #3b82f6;
    color: white;
}

.apply-btn:hover {
    background-color: #2563eb;
}

.clear-btn {
    background-color: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.clear-btn:hover {
    background-color: #e5e7eb;
    text-decoration: none;
}

.active-filters {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.active-filters-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

.active-filters-list {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.active-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: #dbeafe;
    color: #1e40af;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.remove-filter {
    color: #1e40af;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1;
}

.remove-filter:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.surveys-content {
    margin-top: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.results-summary {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background-color: #f8fafc;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

.results-count {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.table-container {
    background: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    overflow-y: hidden;
    overflow-x: auto;
    border: 3px solid var(--PC-Grey-1, rgba(50, 50, 50, 1));
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.surveys-table {
    border-collapse: collapse;
    background: #1a1a1a;
    margin: 10px;
    table-layout: auto; /* allows columns to grow naturally */
    white-space: nowrap; /* prevents wrapping inside cells */
}

.surveys-table thead {
    background-color: #1a1a1a;
}

.surveys-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--PC-Grey-4, rgba(245, 245, 245, 1)) !important;
    border-bottom: 1px solid #404040;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0px;
}

.sort-header {
    color: var(--PC-Grey-4, rgba(245, 245, 245, 1)) !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0px;
    text-align: left;
}

.sort-header:hover {
    color: #14b8a6;
}

.sort-icon {
    width: 12px;
    height: 12px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.sort-icon.active {
    color: #14b8a6;
    opacity: 1;
}

.sort-icon.inactive {
    opacity: 0.4;
    color: #9ca3af;
}

.sort-header:hover .sort-icon.inactive {
    opacity: 0.7;
}

.surveys-table td {
    padding: 1rem;
    border-bottom: 1px solid #404040;
    color: white;
}

.surveys-table tbody tr td {
    align-content: center;
}

.survey-row:hover {
    background-color: #2a2a2a;
}

.survey-name-cell {
    min-width: 250px;
}

.actions-cell {
    min-width: 260px;
}
.survey-name-content .survey-name {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.survey-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0.25rem 0;
    line-height: 1.4;
    text-wrap: auto;
}

.created-by {
    font-size: 0.75rem;
    color: #9ca3af;
}


.distribution-methods {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: center;
}

.distribution-tag {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem;
    background: none;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
    flex-shrink: 0;
}

.distribution-tag img {
    /* Keep original yellow color - no filter */
}

.count-badge {
    display: inline-block;
    background: none;
    color: white;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    min-width: auto;
    text-align: center;
}

.count-badge.hoverable {
    cursor: help;
    transition: color 0.2s ease;
}

.count-badge.hoverable:hover {
    color: #14b8a6;
    transform: none;
    box-shadow: none;
}

/* Table data cell styling for questions, responses, launch date, date closed */
.table-data-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0px;
    color: white;
    text-wrap: auto;
}

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

.question-breakdown-data {
    display: none !important;
}

.question-popover {
    position: absolute;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    min-width: 200px;
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.question-popover.show {
    opacity: 1;
    transform: translateY(0);
}

.popover-header {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    text-align: center;
}

.popover-content {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.breakdown-type {
    font-size: 0.75rem;
    color: #6b7280;
    flex: 1;
}

.breakdown-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    min-width: 1.5rem;
    text-align: center;
}

.popover-arrow {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid white;
}

.popover-arrow::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #e5e7eb;
}

.date-text {
    display: block;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.date-text.table-data-text {
    color: white !important;
}

.time-text {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

.time-text.table-data-text {
    color: white !important;
}

.no-date, .no-sample {
    font-size: 0.875rem;
    color: #9ca3af;
    font-style: italic;
}

.no-date.table-data-text {
    color: white !important;
}

.no-sample.table-data-text {
    color: white !important;
}

.sample-link {
    color: rgba(109, 217, 197, 1);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-offset: 0%;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
}

.sample-link:hover {
    color: rgba(109, 217, 197, 0.8);
    text-decoration: underline;
}

.action-buttons {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    align-items: baseline;
}

.action-btn {
    padding: 0.375rem;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.action-btn img {
    background: transparent !important;
    border-radius: 0;
    width: 20px !important;
    height: 20px !important;
    object-fit: contain;
}

/* Larger size for middle three icons that appear too small */
.details-btn img,
.preview-btn img,
.edit-btn img {
    width: 32px !important;
    height: 32px !important;
}

.results-btn {
    color: #10b981;
}

.details-btn {
    color: #8b5cf6;
}

.preview-btn {
    color: #059669;
}

.edit-btn {
    color: #3b82f6;
}

.delete-btn {
    color: #ef4444;
}

.delete-btn:hover {
    color: #dc2626;
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.empty-state-icon {
    margin: 0 auto 1.5rem;
    color: #9ca3af;
    max-width: 100%;
    box-sizing: border-box;
}

.empty-state-icon svg {
    max-width: 100%;
    height: auto;
}

.empty-state h3 {
    color: #111827;
    margin-bottom: 0.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.empty-state p {
    color: #6b7280;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 0;
}

/* Dark variant for empty states on dark cards (e.g., Templates page) */
.empty-state-dark .empty-state-title {
    color: #ffffff;
}

.empty-state-dark .empty-state-text {
    color: #e5e7eb;
}

.empty-state-dark .empty-state-link {
    color: var(--pc-green-1, #6dd9c5);
    font-weight: 600;
    text-decoration: underline;
}

.empty-state-dark .empty-state-link:hover {
    color: #7de3ce;
}

/* Empty state button constraints - default (desktop) */
.empty-state .button.primary,
.empty-state a.button.primary {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Mobile responsive for empty state */
@media (max-width: 768px) {
    .empty-state {
        padding: 2rem 1rem;
        width: 100%;
        max-width: 100%;
    }

    .empty-state h3 {
        font-size: 18px;
        padding: 0 0.5rem;
    }

    .empty-state p {
        font-size: 14px;
        padding: 0 0.5rem;
    }

    .empty-state .button.primary,
    .empty-state a.button.primary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 12px 16px !important;
        font-size: 13px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.4 !important;
        min-height: 44px !important;
        height: auto !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 1.5rem 0.75rem;
    }

    .empty-state h3 {
        font-size: 16px;
        padding: 0 0.25rem;
    }

    .empty-state p {
        font-size: 13px;
        padding: 0 0.25rem;
    }

    .empty-state .button.primary,
    .empty-state a.button.primary {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

.pagination-wrapper {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-wrapper .table-results-info {
    margin-bottom: 0;
    text-align: left;
}

@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .pagination-wrapper .table-results-info {
        text-align: center;
        margin-bottom: 0;
    }
}

/* Pagination styling to match site buttons */
.pagination {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.5rem;
    align-items: center;
}

.page-item {
    margin: 0;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: #2a2a2a;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid #404040;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    min-width: 44px;
    min-height: 36px;
    transition: all 0.2s ease;
}

.page-link:hover {
    background: #3a3a3a;
    color: #14b8a6;
    text-decoration: none;
    border-color: #14b8a6;
}

.page-item.active .page-link {
    background: #14b8a6;
    color: white;
    border-color: #14b8a6;
}

.page-item.active .page-link:hover {
    background: #0f9b8a;
    color: white;
}

.page-item.disabled .page-link {
    background: #1a1a1a;
    color: #6b7280;
    border-color: #2a2a2a;
    cursor: not-allowed;
}

.page-item.disabled .page-link:hover {
    background: #1a1a1a;
    color: #6b7280;
    border-color: #2a2a2a;
}

/* Make number buttons narrower - target buttons that contain only numbers */
.pagination .page-item:not(:first-child):not(:last-child) .page-link {
    padding: 0.5rem 0.75rem;
    min-width: 36px;
}

/* Users table styling - inherit from surveys table */
.users-action-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .users-action-header {
        justify-content: stretch;
    }
    .users-action-header .button-primary {
        width: 100%;
        text-align: center;
    }
}

.users-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: #1a1a1a;
    table-layout: auto;
    white-space: nowrap;
}

.users-table thead {
    background-color: #1a1a1a;
}

.users-table th {
    padding: 1rem;
    text-align: left;
    color: var(--PC-Grey-4, rgba(245, 245, 245, 1)) !important;
    border-bottom: 1px solid #404040;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0px;
    white-space: nowrap;
}

.users-table td {
    padding: 1rem;
    border-bottom: 1px solid #404040;
    vertical-align: top;
    color: white;
    white-space: nowrap;
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}

.user-row:hover {
    background-color: #2a2a2a;
}

.empty-state-cell {
    text-align: center;
    padding: 4rem 2rem;
}

/* Users table action buttons alignment and sizing */
.users-table .action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
}

.users-table .actions-cell {
    min-width: 140px;
}

.users-table .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
}

/* Make view icon larger in users table */
.users-table .view-btn img {
    width: 32px !important;
    height: 32px !important;
}

/* Action button styling for reset button */
.reset-btn {
    color: #f59e0b;
}

.reset-btn:hover {
    color: #d97706;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Users table sort headers - inherit from surveys table */
.users-table .sort-header {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s ease;
}

.users-table .sort-header:hover {
    color: #14b8a6;
}

.users-table .sort-icon.active {
    color: #14b8a6;
    opacity: 1;
}

.users-table .sort-icon.inactive {
    opacity: 0.4;
    color: #9ca3af;
}

.users-table .sort-header:hover .sort-icon.inactive {
    opacity: 0.7;
}

.teams-action-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .teams-action-header {
        justify-content: stretch;
    }
    .teams-action-header .button-primary {
        width: 100%;
        text-align: center;
    }
}

/* Teams Table Styling - matches users table */
.teams-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: #1a1a1a;
    table-layout: auto;
    white-space: nowrap;
}

.teams-table thead {
    background-color: #1a1a1a;
}

.teams-table th {
    padding: 1rem;
    text-align: left;
    color: var(--PC-Grey-4, rgba(245, 245, 245, 1)) !important;
    border-bottom: 1px solid #404040;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0px;
    white-space: nowrap;
}

.teams-table td {
    padding: 1rem;
    border-bottom: 1px solid #404040;
    vertical-align: top;
    color: white;
    white-space: nowrap;
}

.teams-table tbody tr:last-child td {
    border-bottom: none;
}

.team-row:hover {
    background-color: #2a2a2a;
}

.teams-table .action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
}

.teams-table .actions-cell {
    min-width: 140px;
}

.teams-table .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
}

.teams-table .view-btn img {
    width: 32px !important;
    height: 32px !important;
}

/* Team Members Header and Actions */
.team-members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.team-members-header .section-title {
    margin-bottom: 0;
}

.team-delete-action {
    margin-top: 1.5rem;
}

.team-delete-action .button.danger {
    height: 50px;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    padding: 0 24px;
    letter-spacing: 0.5px;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .team-members-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    .team-members-header .button {
        text-align: center;
    }
    .team-delete-action .button {
        width: 100%;
    }
}

/* Team Members Table Styling */
.team-members-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: #1a1a1a;
    table-layout: auto;
    white-space: nowrap;
}

.team-members-table thead {
    background-color: #1a1a1a;
}

.team-members-table th {
    padding: 1rem;
    text-align: left;
    color: var(--PC-Grey-4, rgba(245, 245, 245, 1)) !important;
    border-bottom: 1px solid #404040;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0px;
    white-space: nowrap;
}

.team-members-table td {
    padding: 1rem;
    border-bottom: 1px solid #404040;
    vertical-align: top;
    color: white;
    white-space: nowrap;
}

.team-members-table tbody tr:last-child td {
    border-bottom: none;
}

.team-member-row:hover {
    background-color: #2a2a2a;
}

.team-members-table .action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.25rem;
    align-items: center;
    justify-content: flex-start;
}

.team-members-table .actions-cell {
    min-width: 80px;
}

.team-members-table .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
}

.team-members-table .view-btn img {
    width: 32px !important;
    height: 32px !important;
}

/* Contacts Table Styling - matches users and teams table */
.contacts-table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1a1a;
    margin: 10px;
}

.contacts-table thead {
    background-color: #1a1a1a;
}

.contacts-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--PC-Grey-4, rgba(245, 245, 245, 1)) !important;
    border-bottom: 1px solid #404040;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
}

.contacts-table th.sortable {
    cursor: pointer;
    color: white;
    text-decoration: none;
    display: table-cell;
}

.contacts-table th.sortable:hover {
    color: #14b8a6;
}

.contacts-table .sort-icon.active {
    color: #14b8a6;
    opacity: 1;
}

.contacts-table .sort-icon.inactive {
    opacity: 0.4;
    color: #9ca3af;
}

.contacts-table th.sortable:hover .sort-icon.inactive {
    opacity: 0.7;
}

.contacts-table td {
    padding: 1rem;
    border-bottom: 1px solid #404040;
    vertical-align: top;
    color: white;
}

.contacts-table tbody tr:last-child td {
    border-bottom: none;
}

.contact-row:hover {
    background-color: #2a2a2a;
}

.contacts-table .action-buttons {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    /* justify-content: flex-start; */
}

.contacts-table .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.contacts-table .view-btn img {
    width: 32px !important;
    height: 32px !important;
}

/* Responsive design for surveys table */
@media (max-width: 1200px) {
    .surveys-table {
        font-size: 0.875rem;
    }

    .surveys-table th,
    .surveys-table td {
        padding: 0.75rem;
    }
}

@media (max-width: 1420px) {
    .page-header {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    .tabs {
        justify-content: center !important;
    }
    .filters-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }
}

@media (max-width: 768px) {
    .page-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .tabs {
        justify-content: center;
    }

    .filters-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        min-width: auto;
    }

    .filter-dropdowns {
        flex-direction: column;
    }

    .filter-select {
        min-width: auto;
    }

    .filter-actions {
        justify-content: space-between;
    }

    .active-filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* Delete Confirmation Modal */
.modal-overlay.delete-confirmation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.delete-confirmation.show {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.modal-overlay.delete-confirmation.show .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.modal-icon {
    width: 3rem;
    height: 3rem;
    background-color: #fef2f2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.modal-body {
    margin-bottom: 2rem;
}

.modal-text {
    color: #6b7280;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.survey-name-highlight {
    font-weight: 600;
    color: #111827;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-btn {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn-cancel {
    background-color: white;
    color: #374151;
    border: 1px solid #d1d5db;
}

.modal-btn-cancel:hover {
    background-color: #f9fafb;
}

.modal-btn-delete {
    background-color: #ef4444;
    color: white;
}

.modal-btn-delete:hover {
    background-color: #dc2626;
}

.modal-btn-delete:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

/* ============================================
   Login New Design Styles
   ============================================ */

/* CSS Variables for Pulse Check Colors */
:root {
    --pc-red-main: #e32b24;
    --pc-green-1: #6dd9c5;
    --pc-grey-1: #323232;
    --pc-grey-2: #707070;
    --pc-grey-3: #eeeeee;
    --pc-grey-4: #f5f5f5;
    --pc-black: #000000;
    --pc-bg-dark: #1d1f22;
    --pc-bg-card: #0e0f11;
}

/* Login page Container */
.login-page-container {
    background-color: var(--pc-bg-dark);
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

/* Background pattern (M MAGNET logo pattern with staggered rows) */
/* Odd rows (1, 3, 5...) - normal alignment */
.login-page-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/brand/magnet-logo.svg');
    background-size: 112px 56px;
    background-position: 0 0;
    background-repeat: repeat;
    opacity: 0.05;
    z-index: 0;
    /* Mask: show odd rows (0-56px, 112-168px, 224-280px...) */
    -webkit-mask-image: repeating-linear-gradient(
        180deg,
        black 0px,
        black 56px,
        transparent 56px,
        transparent 112px
    );
    mask-image: repeating-linear-gradient(
        180deg,
        black 0px,
        black 56px,
        transparent 56px,
        transparent 112px
    );
}

/* Even rows (2, 4, 6...) - offset by 75px */
.login-page-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/brand/magnet-logo.svg');
    background-size: 112px 56px;
    background-position: 56px 0;
    background-repeat: repeat;
    opacity: 0.05;
    z-index: 0;
    /* Mask: show even rows (56-112px, 168-224px, 280-336px...) */
    -webkit-mask-image: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 56px,
        black 56px,
        black 112px
    );
    mask-image: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 56px,
        black 56px,
        black 112px
    );
}

.login-page-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Login Card */
.login-page-card {
    background-color: var(--pc-bg-card);
    border: 3px solid var(--pc-grey-1);
    border-radius: 20px;
    padding: 48px;
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    box-sizing: border-box;
}

/* Branding Section */
.login-page-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.login-page-logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.login-page-icon-wrapper {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-check-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-page-title {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: normal;
    color: #ffffff;
    margin: 0;
    text-align: center;
}

/* Content Section */
.login-page-content-section {
    display: flex;
    flex-direction: column;
    gap: 36px;
    align-items: flex-start;
    width: 100%;
}

/* Carousel Wrapper */
.login-page-carousel-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    /* margin-bottom: 36px; */
}

.login-page-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.login-page-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    width: 100%;
}

.login-page-slide.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-page-research-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.login-page-research-icon-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-research-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-page-collaboration-icon {
    width: 100%;
    height: 100%;
}

.login-page-security-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-security-icon-placeholder svg {
    width: 100%;
    height: 100%;
}

.login-page-research-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.login-page-research-title {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-size: 36px;
    line-height: normal;
    color: #ffffff;
    margin: 0;
}

.login-page-research-tagline {
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: var(--pc-grey-3);
    margin: 0;
}

/* Pagination Dots */
.login-page-pagination {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0 2px;
}

.login-page-dot {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.login-page-dot:hover {
    transform: scale(1.2);
}

.login-page-dot:focus {
    outline: 2px solid var(--pc-green-1);
    outline-offset: 2px;
    border-radius: 50%;
}

.login-page-dot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Login Section */
.login-page-login-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* SSO Error Message */
.login-page-sso-error {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px 16px;
    color: #dc2626;
    font-family: "montserrat", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 16px;
}

/* Email Login Button */
.login-page-email-btn {
    background-color: var(--pc-red-main);
    color: var(--pc-grey-4);
    border: none;
    border-radius: 6px;
    padding: 15px 24px;
    height: 56px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-email-btn:hover {
    background-color: #c5261f;
}

/* Divider */
.login-page-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.login-page-divider-text {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
    color: var(--pc-grey-2);
}

/* Social Login Buttons */
.login-page-social-buttons {
    display: flex;
    gap: 24px;
    width: 100%;
}

.login-page-social-btn {
    background-color: var(--pc-grey-4);
    color: var(--pc-black);
    border: none;
    border-radius: 6px;
    padding: 15px 24px;
    height: 56px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-sizing: border-box;
}

.login-page-social-btn:hover:not([style*="pointer-events: none"]) {
    background-color: #e5e5e5;
}

/* Spinner Styles */
.login-page-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: currentColor;
    animation: login-page-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.login-page-social-btn .login-page-spinner {
    border-color: rgba(0, 0, 0, 0.3);
    border-top-color: currentColor;
}

.login-page-btn-text {
    transition: opacity 0.2s ease;
}

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

.login-page-social-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Separator Line */
.login-page-separator {
    background-color: var(--pc-grey-1);
    height: 2px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* Organization Section */
.login-page-organization-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.login-page-organization-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.login-page-organization-question {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--pc-grey-2);
    margin: 0;
}

.login-page-learn-more {
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
    text-transform: uppercase;
    color: var(--pc-green-1);
    text-decoration: underline;
    text-underline-position: from-font;
}

.login-page-learn-more:hover {
    color: #5bc4b0;
}

/* Request Account Button */
.login-page-request-btn {
    background-color: rgba(109, 217, 197, 0.25);
    border: 4px solid var(--pc-green-1);
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-radius: 10px;
    padding: 24px;
    height: 56px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
    text-align: center;
    color: var(--pc-grey-4);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-request-btn:hover {
    background-color: rgba(109, 217, 197, 0.35);
    border-color: #7de3ce;
}

/* Login Form Styles */
.login-page-email-form {
    width: 100%;
    margin-top: 24px;
}

.login-page-form {
    width: 100%;
}

.login-page-form-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-page-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-page-field label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-page-field label span {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--pc-grey-3);
}

.login-page-field input[type="email"],
.login-page-field input[type="password"] {
    background-color: var(--pc-bg-card);
    border: 2px solid var(--pc-grey-1);
    border-radius: 6px;
    padding: 12px 16px;
    font-family: "montserrat", sans-serif;
    font-size: 16px;
    color: #ffffff;
    height: 48px;
    box-sizing: border-box;
}

.login-page-field input[type="email"]:focus,
.login-page-field input[type="password"]:focus {
    outline: none;
    border-color: var(--pc-green-1);
}

.login-page-field input[type="email"]::placeholder,
.login-page-field input[type="password"]::placeholder {
    color: var(--pc-grey-2);
}

.login-page-field.checkbox {
    flex-direction: row;
    align-items: center;
}

.login-page-field.checkbox label {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.login-page-field.checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.login-page-field.checkbox span {
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--pc-grey-3);
}

.login-page-form-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.login-page-submit-btn {
    background-color: var(--pc-red-main);
    color: var(--pc-grey-4);
    border: none;
    border-radius: 6px;
    padding: 15px 24px;
    height: 48px;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-page-submit-btn:hover:not(:disabled) {
    background-color: #c5261f;
}

.login-page-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-page-forgot-link {
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--pc-green-1);
    text-decoration: none;
}

.login-page-forgot-link:hover {
    color: #7de3ce;
    text-decoration: underline;
}

.login-page-back-btn {
    background-color: transparent;
    color: var(--pc-grey-3);
    border: 1px solid var(--pc-grey-1);
    border-radius: 6px;
    padding: 10px 20px;
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    margin-top: 12px;
    width: 100%;
}

.login-page-back-btn:hover {
    background-color: var(--pc-grey-1);
    color: #ffffff;
}

.login-page-status {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.login-page-error {
    color: var(--pc-red-main);
    font-family: "montserrat", sans-serif;
    font-size: 12px;
    margin-top: 4px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-page-card {
        padding: 32px 24px;
        max-width: 100%;
    }

    .login-page-title {
        font-size: 32px;
    }

    .login-page-research-title {
        font-size: 28px;
    }

    .login-page-research-tagline {
        font-size: 18px;
    }

    .login-page-social-buttons {
        flex-direction: column;
    }

    .login-page-organization-header {
        flex-direction: column;
        gap: 8px;
    }
}

/* Hide header and footer on login page */
body.guest .login-page-container ~ * {
    display: none;
}

body.guest main.guest {
    padding-top: 0;
}

body.guest #site_header {
    display: none;
}

body.guest footer {
    display: none;
}

/* ============================================
   Learn More Modal Styles
   ============================================ */

.learn-more-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 1rem;
    box-sizing: border-box;
}

.learn-more-modal-overlay.show {
    opacity: 1 !important;
    visibility: visible !important;
}

.learn-more-modal {
    background: linear-gradient(145deg, #0e0f11 0%, #1a1c20 100%);
    border: 2px solid var(--pc-grey-1);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.learn-more-modal-overlay.show .learn-more-modal {
    transform: translateY(0) scale(1);
}

.learn-more-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--pc-grey-3);
    transition: all 0.2s ease;
    z-index: 10;
}

.learn-more-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    transform: rotate(90deg);
}

.learn-more-modal-content {
    padding: 2.5rem;
    color: #ffffff;
}

.learn-more-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.learn-more-modal-logo {
    width: 56px;
    height: 56px;
}

.learn-more-modal-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.learn-more-modal-header h2 {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    color: #ffffff;
    margin: 0;
}

.learn-more-intro {
    font-family: "montserrat", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--pc-grey-3);
    margin: 0 0 0.75rem 0;
}

.learn-more-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.learn-more-section h3 {
    font-family: "poppins", sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--pc-green-1);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.learn-more-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.learn-more-list li {
    font-family: "montserrat", sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--pc-grey-3);
    padding: 0.5rem 0 0.5rem 1.75rem;
    position: relative;
}

.learn-more-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.9rem;
    width: 8px;
    height: 8px;
    background: var(--pc-green-1);
    border-radius: 50%;
}

.learn-more-list-numbered li {
    counter-increment: list-counter;
}

.learn-more-list-numbered li::before {
    content: counter(list-counter);
    width: 20px;
    height: 20px;
    background: var(--pc-green-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #000;
    top: 0.6rem;
}

/* Features grid */
.learn-more-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.learn-more-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(109, 217, 197, 0.05);
    border: 1px solid rgba(109, 217, 197, 0.15);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.learn-more-feature:hover {
    background: rgba(109, 217, 197, 0.1);
    border-color: rgba(109, 217, 197, 0.3);
}

.feature-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(109, 217, 197, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-green-1);
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.feature-text strong {
    font-family: "poppins", sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #ffffff;
}

.feature-text span {
    font-family: "montserrat", sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--pc-grey-2);
}

/* Steps list */
.learn-more-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.learn-more-steps li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.learn-more-steps li:hover {
    background: rgba(255, 255, 255, 0.06);
}

.step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--pc-green-1), #4fc4b0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-size: 0.8125rem;
    color: #000000;
}

.step-text {
    font-family: "montserrat", sans-serif;
    font-size: 0.9375rem;
    color: var(--pc-grey-3);
}

/* Modal actions */
.learn-more-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.learn-more-btn-request {
    background: var(--pc-red-main);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.learn-more-btn-request:hover {
    background: #c5261f;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(227, 43, 36, 0.3);
}

.learn-more-btn-back {
    background: transparent;
    color: var(--pc-grey-2);
    border: 2px solid var(--pc-grey-1);
    border-radius: 8px;
    padding: 0.875rem 1.5rem;
    font-family: "montserrat", sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.learn-more-btn-back:hover {
    color: #ffffff;
    border-color: var(--pc-grey-2);
    background: rgba(255, 255, 255, 0.05);
}

/* Modal scrollbar styling */
.learn-more-modal::-webkit-scrollbar {
    width: 8px;
}

.learn-more-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.learn-more-modal::-webkit-scrollbar-thumb {
    background: var(--pc-grey-1);
    border-radius: 4px;
}

.learn-more-modal::-webkit-scrollbar-thumb:hover {
    background: var(--pc-grey-2);
}

/* Responsive adjustments for Learn More modal */
@media (max-width: 640px) {
    .learn-more-modal-content {
        padding: 2rem 1.5rem;
    }

    .learn-more-modal-header h2 {
        font-size: 1.5rem;
    }

    .learn-more-feature {
        flex-direction: column;
        align-items: flex-start;
    }

    .learn-more-intro {
        font-size: 0.9375rem;
    }

    .learn-more-modal-close {
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
    }
}

/* Forgot Password Specific Styles */
.login-page-forgot-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.login-page-confirmation {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.login-page-confirmation-content {
    text-align: center;
}

.login-page-confirmation-title {
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: normal;
    color: #ffffff;
    margin: 0 0 12px 0;
}

.login-page-confirmation-text {
    font-family: "montserrat", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--pc-grey-3);
    margin: 0;
}

/* Additional spacing for forgot password form */
.login-page-forgot-actions {
    margin-top: 24px;
}

/* Two-Factor Authentication Specific Styles */
.login-page-twofactor-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.login-page-twofactor-input {
    text-align: center;
    font-family: "JetBrains Mono", "Fira Code", "Courier New", monospace;
    font-size: 24px;
    letter-spacing: 8px;
    font-weight: 600;
}


@media (max-width: 768px) {
    .login-page-twofactor-input {
        font-size: 20px;
        letter-spacing: 4px;
    }

    .login-page-twofactor-input::placeholder {
        font-size: 14px;
    }
}

.login-page-twofactor-actions {
    margin-top: 24px;
}

.login-page-twofactor-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.login-page-twofactor-link {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--pc-green-1);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-page-twofactor-link:hover {
    color: #7de3ce;
    text-decoration: underline;
}

/* Reset Password Specific Styles */
.login-page-reset-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.login-page-reset-actions {
    margin-top: 24px;
}

.login-page-password-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.login-page-password-input {
    width: 100% !important;
    padding-right: 48px;
}

.login-page-password-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-page-password-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.login-page-password-icon.show {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z'%3E%3C/path%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z'%3E%3C/path%3E%3C/svg%3E");
}

.login-page-password-icon.hide {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21'%3E%3C/path%3E%3C/svg%3E");
}


/* Ensure revealed passwords maintain same styling as hidden passwords */
.login-page-password-input[type="text"] {
    /* Inherit all styling from password input, no changes needed */
}


/* Make text inputs (revealed passwords) look exactly like password inputs */
.login-page-field input[type="text"] {
    background-color: var(--pc-bg-card) !important;
    border: 2px solid var(--pc-grey-1) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    font-family: "montserrat", sans-serif !important;
    font-size: 16px !important;
    color: #ffffff !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.login-page-field input[type="text"]:focus {
    outline: none !important;
    border-color: var(--pc-green-1) !important;
}

.login-page-field input[type="text"]::placeholder {
    color: var(--pc-grey-2) !important;
}

/* Dashboard Layout - Applied when user is authenticated */
body.authenticated {
    background: var(--pc-bg-dark);
    color: var(--pc-grey-4);
    font-family: "montserrat", sans-serif;
    margin: 0;
    padding: 0;
}

/* Remove background pattern from authenticated pages */
body.authenticated .login-page-container::before,
body.authenticated .login-page-container::after,
body.authenticated::before,
body.authenticated::after {
    display: none !important;
}

/* Ensure no background patterns on authenticated body */
body.authenticated {
    background-image: none !important;
}

/* Remove any inherited background patterns */
body.authenticated *::before,
body.authenticated *::after {
    background-image: none !important;
}

/* Dashboard Header */
body.authenticated #site_header {
    background: #000000;
    border-bottom: 2px solid rgba(50, 50, 50, 0.75);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: fixed;
    top: 0;
    left: 350px;
    width: calc(100% - 350px);
    box-sizing: border-box;
    z-index: 100;
}

body.authenticated.with-quicklaunch #site_header {
    left: 350px;
    width: calc(100% - 350px);
}

body.authenticated:not(.with-quicklaunch) #site_header {
    left: 0;
    width: 100%;
}

body.authenticated #site_header #quicklaunch-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.authenticated #site_header #brand_logo_link {
    display: none;
}

body.authenticated #site_header #user_nav {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.authenticated #site_header #user_photo {
    color: white;
    font-family: "montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
}

/* Side Navigation */
body.authenticated #quicklaunch {
    position: fixed;
    left: 0;
    top: 0;
    width: 350px;
    height: 100vh;
    min-height: 100vh;
    background: var(--pc-black);
    box-shadow: 8px 0px 8px 0px rgba(0, 0, 0, 0.25);
    z-index: 200;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

body.authenticated #quicklaunch.hidden {
    transform: translateX(-350px);
}

/* Navigation Header */
body.authenticated #quicklaunch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: var(--pc-black);
    border-bottom: 2px solid rgba(50, 50, 50, 0.75);
    z-index: 1;
}

body.authenticated #quicklaunch-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 2;
}

body.authenticated #quicklaunch-logo {
    width: 36px;
    height: 36px;
    background-image: url('/assets/img/dashboard/icon-check-survey.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

body.authenticated #quicklaunch-title {
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-size: 24px;
    color: white;
    margin: 0;
}

/* Quick Launch Section */
body.authenticated #quicklaunch-quick-launch {
    position: absolute;
    top: 116px;
    left: 48px;
    right: 48px;
    background: rgba(109, 217, 197, 0.25);
    border-bottom: 4px solid var(--pc-green-1);
    border-radius: 10px;
    padding: 24px;
    height: 56px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
}

body.authenticated #quicklaunch-quick-launch-icon {
    width: 24px;
    height: 24px;
    background-image: url('/assets/img/dashboard/icon-quick-launch.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

body.authenticated #quicklaunch-quick-launch-text {
    font-family: "montserrat", sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--pc-green-1);
    text-transform: uppercase;
    margin: 0;
}

/* Navigation Menu */
body.authenticated #quicklaunch-menu {
    position: absolute;
    top: 338px;
    left: 48px;
    right: 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.authenticated #quicklaunch-menu .nav-item {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 24px;
    text-decoration: none;
    color: var(--pc-grey-4);
    font-family: "montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0 10px 10px 0;
    transition: all 0.2s ease;
}

body.authenticated #quicklaunch-menu .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.authenticated #quicklaunch-menu .nav-item.active {
    background: rgba(251, 87, 83, 0.25);
    border-left: 3px solid #fb5753;
    color: #fb5753;
    padding-left: 21px;
}

body.authenticated #quicklaunch-menu .nav-icon {
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Make all icons white by default */
    filter: brightness(0) invert(1);
}

/* Active nav item icon should be red */
body.authenticated #quicklaunch-menu .nav-item.active .nav-icon {
    /* Apply red color filter (#FB5753) */
    filter: brightness(0) invert(17%) sepia(89%) saturate(4959%) hue-rotate(358deg) brightness(99%) contrast(96%);
}

body.authenticated #quicklaunch-menu .nav-icon.dashboard {
    background-image: url('/assets/img/dashboard/icon-dashboard.svg');
}

body.authenticated #quicklaunch-menu .nav-icon.create-survey {
    background-image: url('/assets/img/dashboard/icon-create-survey.svg');
}

body.authenticated #quicklaunch-menu .nav-icon.manage-surveys {
    background-image: url('/assets/img/dashboard/icon-manage-surveys.svg');
}

body.authenticated #quicklaunch-menu .nav-icon.sample-list {
    background-image: url('/assets/img/dashboard/icon-sample-list.svg');
}

body.authenticated #quicklaunch-menu .nav-icon.question-bank {
    background-image: url('/assets/img/dashboard/icon-question-bank.svg');
}

/* Main Content Area */
body.authenticated main {
    margin-left: 350px;
    min-height: calc(100vh - 160px);
    transition: margin-left 0.3s ease;
    padding-bottom: 0;
}

/* Override for survey pages - minimal top spacing */
body.authenticated main .survey-wizard {
    margin-top: 0 !important;
    padding-top: 0.2em !important;
}

body.authenticated:not(.with-quicklaunch) main {
    margin-left: 0;
}

/* Footer */
body.authenticated footer {
    background: rgba(0, 0, 0, 0.5);
    border-top: 2px solid rgba(50, 50, 50, 0.75);
    height: 80px;
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-sizing: border-box;
}

body.authenticated:not(.with-quicklaunch) footer {
    left: 0;
    width: 100%;
}

body.authenticated footer .footer-left {
    font-family: "montserrat", sans-serif;
    font-size: 14px;
    color: var(--pc-grey-2);
}

body.authenticated footer .footer-right {
    display: flex;
    gap: 24px;
    font-family: "montserrat", sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

body.authenticated footer .footer-right a {
    color: var(--pc-grey-2);
    text-decoration: none;
}

body.authenticated footer .footer-right a:hover {
    color: var(--pc-grey-3);
}

/* Dashboard Starting Point Content */
.dashboard-starting-point {
    padding: 60px 24px 24px;
}

/* Survey Builder Starting Point - reuses dashboard styles */
.survey-builder-starting-point {
    padding: 60px 24px 24px;
}

/* Responsive adjustments for survey builder */
@media (max-width: 1400px) {
    .survey-builder-starting-point .survey-options {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .survey-builder-starting-point .survey-option {
        flex: 1;
        min-width: 280px;
        max-width: 308px;
    }
}

@media (max-width: 768px) {
    .survey-builder-starting-point {
        padding: 60px 16px 24px;
    }

    .survey-builder-starting-point .survey-options {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        padding: 0;
    }

    .survey-builder-starting-point .survey-option {
        width: 100%;
        max-width: calc(100% - 32px);
        min-width: unset;
        margin-bottom: 16px;
        padding: 20px;
        box-sizing: border-box;
    }

    .survey-builder-starting-point .survey-option .content {
        width: 100%;
        max-width: 100%;
    }

    .survey-builder-starting-point .survey-option .text {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .survey-builder-starting-point .survey-option .text h3 {
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .survey-builder-starting-point .survey-option .text p {
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }

    .survey-builder-starting-point h1 {
        font-size: 24px;
        margin-bottom: 40px;
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .survey-builder-starting-point {
        padding: 40px 12px 24px;
    }

    .survey-builder-starting-point .survey-options {
        gap: 12px;
    }

    .survey-builder-starting-point .survey-option {
        max-width: calc(100% - 24px);
        padding: 16px;
        height: auto;
        min-height: 350px;
    }

    .survey-builder-starting-point .survey-option .content {
        gap: 16px;
        width: 100%;
        max-width: 100%;
    }

    .survey-builder-starting-point .survey-option .text {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .survey-builder-starting-point .survey-option .text h3 {
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 18px;
    }

    .survey-builder-starting-point .survey-option .text p {
        width: 100%;
        max-width: 100%;
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
        font-size: 13px;
    }
}

.survey-builder-starting-point h1 {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: white;
    text-shadow: 0px 0px 150px rgba(255, 255, 255, 0.75);
    margin-bottom: 60px;
}

.survey-builder-starting-point .survey-options {
    display: flex;
    gap: 24px;
    justify-content: center;
    max-width: 1296px;
    margin: 0 auto;
}

.survey-builder-starting-point .survey-option {
    background: transparent;
    border: 3px solid var(--pc-grey-1);
    border-radius: 20px;
    width: 308px;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.survey-builder-starting-point .survey-option:hover {
    border-color: var(--pc-green-1);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.survey-builder-starting-point .survey-option .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.survey-builder-starting-point .survey-option .icon {
    width: 250px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.survey-builder-starting-point .survey-option.scratch .icon {
    width: 280px;
    height: 280px;
    background-image: url('/assets/img/dashboard/icon-plus.svg');
}

.survey-builder-starting-point .survey-option.template .icon {
    background-image: url('/assets/img/dashboard/icon-template.svg');
}

.survey-builder-starting-point .survey-option.copy .icon {
    background-image: url('/assets/img/dashboard/icon-copy.svg');
}

.survey-builder-starting-point .survey-option.launch .icon {
    background-image: url('/assets/img/dashboard/icon-plus-disabled.svg');
}

.survey-builder-starting-point .survey-option .text {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.survey-builder-starting-point .survey-option .text h3 {
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 12px 0;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
}

.survey-builder-starting-point .survey-option .text h3 {
    color: var(--pc-grey-3);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.survey-builder-starting-point .survey-option:hover .text h3 {
    color: var(--pc-green-1);
    text-shadow: none;
}

.survey-builder-starting-point .survey-option .text p {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    color: var(--pc-grey-2);
}

.survey-builder-starting-point .survey-option:hover .text p {
    color: white;
}

.survey-builder-starting-point .survey-option .soon-badge {
    position: absolute;
    top: 40px;
    right: -1px;
    background: rgba(251, 87, 83, 0.25);
    border: 2px solid #fb5753;
    border-right: none;
    border-radius: 20px 0 0 20px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.survey-builder-starting-point .survey-option .soon-badge .icon {
    width: 18px;
    height: 18px;
    background-image: url('/assets/img/dashboard/icon-closed.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.survey-builder-starting-point .survey-option .soon-badge .text {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fb5753;
    text-align: center;
}

.dashboard-starting-point h1 {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-size: 30px;
    color: white;
    text-shadow: 0px 0px 150px rgba(255, 255, 255, 0.75);
    margin-bottom: 60px;
}

.dashboard-starting-point .survey-options {
    display: flex;
    gap: 24px;
    justify-content: center;
    max-width: 972px;
    margin: 0 auto;
    box-shadow: 0px 0px 200px 0px rgba(109, 217, 197, 0.1);
}

.dashboard-starting-point .survey-option {
    background: rgba(14, 15, 17, 0.5);
    border: 3px solid var(--pc-grey-1);
    border-radius: 20px;
    width: 308px;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.dashboard-starting-point .survey-option:hover {
    border-color: var(--pc-green-1);
    transform: translateY(-4px);
}

.dashboard-starting-point .survey-option.active {
    border-color: var(--pc-green-1);
}

.dashboard-starting-point .survey-option .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.dashboard-starting-point .survey-option .icon {
    width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.dashboard-starting-point .survey-option.scratch .icon {
    width: 175px;
    height: 175px;
    background-image: url('/assets/img/dashboard/icon-plus.svg');
}

.dashboard-starting-point .survey-option.template .icon {
    background-image: url('/assets/img/dashboard/icon-template.svg');
}

.dashboard-starting-point .survey-option.copy .icon {
    background-image: url('/assets/img/dashboard/icon-copy.svg');
}

.dashboard-starting-point .survey-option .text h3 {
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-size: 20px;
    margin: 0 0 12px 0;
}

.dashboard-starting-point .survey-option.scratch .text h3 {
    color: var(--pc-green-1);
}

.dashboard-starting-point .survey-option:not(.scratch) .text h3 {
    color: var(--pc-grey-3);
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.dashboard-starting-point .survey-option .text p {
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    width: 260px;
}

.dashboard-starting-point .survey-option.scratch .text p {
    color: white;
}

.dashboard-starting-point .survey-option:not(.scratch) .text p {
    color: var(--pc-grey-2);
}

.dashboard-starting-point .survey-option .soon-badge {
    position: absolute;
    top: 40px;
    right: -1px;
    background: rgba(251, 87, 83, 0.25);
    border: 2px solid #fb5753;
    border-right: none;
    border-radius: 20px 0 0 20px;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dashboard-starting-point .survey-option .soon-badge .icon {
    width: 18px;
    height: 18px;
    background-image: url('/assets/img/dashboard/icon-closed.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.dashboard-starting-point .survey-option .soon-badge .text {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fb5753;
    text-align: center;
}

/* IMPORTANT: Override all background patterns on authenticated pages */
body.authenticated section,
body.authenticated main {
    background-image: none !important;
    background: #181818 !important;
    background-color: #181818 !important;
}

body.authenticated section:before,
body.authenticated section:after,
body.authenticated main:before,
body.authenticated main:after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* Header styling to match Figma design */
#site_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 72px;
    background: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

body.authenticated #site_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
}

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

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.header-center .survey-name,
.header-center .page-title {
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0.07px;
    white-space: nowrap;
}

/* Mobile heading in main content */
.mobile-page-heading {
    display: none;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 20px !important;
    line-height: 32px !important;
    letter-spacing: 0.07px !important;
    text-align: center !important;
    margin-bottom: 16px !important;
}

@media screen and (max-width: 768px) {
    .header-center {
        display: none;
    }

    .mobile-page-heading {
        display: block;
    }
}

/* Hamburger menu styling */
.hamburger-menu-toggle {
    background: transparent !important;
    color: #e32b24 !important;
    border: none !important;
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
}

.hamburger-menu-toggle:hover {
    background: rgba(227, 43, 36, 0.1) !important;
}

.hamburger-menu-toggle.active {
    background: transparent !important;
}

/* User navigation styling */
#user_nav {
    display: flex;
    align-items: center;
}

.user-info-container {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 72px;
    padding-right: 16px;
}

.user-name {
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
}

/* User icon styling to match Figma */
#user_photo {
    background: transparent !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
    text-indent: 0 !important;
    flex-shrink: 0;
}

#user_photo:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.simple-user-icon {
    width: 32px;
    height: 32px;
    background: transparent;
    border: 2px solid #e32b24;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.simple-user-icon::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border: 2px solid #e32b24;
    border-radius: 50%;
    background: transparent;
}

.simple-user-icon::after {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 8px;
    border: 2px solid #e32b24;
    border-radius: 7px 7px 0 0;
    border-bottom: none;
    background: transparent;
}

/* Hide original brand logo for authenticated users */
body.authenticated #brand_logo_link {
    display: none;
}

/* Mobile Navigation Overlay */
@media (max-width: 768px) {
    /* Mobile: Side navigation overlay */
    body.authenticated #quicklaunch {
        position: fixed;
        top: 0;
        left: -350px;
        width: 350px;
        height: 100vh;
        z-index: 2000;
        transition: left 0.3s ease;
        background: #0F0F0F;
        border-right: 1px solid var(--pc-grey-1);
    }

    body.authenticated #quicklaunch:not(.hidden) {
        left: 0;
    }

    /* Backdrop element - show when menu is open */
    .mobile-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 1999;
        cursor: pointer;
        display: none;
    }

    /* Show backdrop when menu is open */
    body.with-quicklaunch .mobile-backdrop {
        display: block !important;
    }

    /* Make backdrop darker on mobile */
    @media (max-width: 768px) {
        body.with-quicklaunch .mobile-backdrop {
            background: rgba(0, 0, 0, 0.5);
        }
    }

    /* Mobile: Don't push main content */
    body.authenticated main {
        margin-left: 0 !important;
        transition: none;
    }

    /* Mobile: Don't push footer */
    body.authenticated footer {
        left: 0 !important;
        width: 100% !important;
        transition: none;
        flex-direction: column;
        height: auto;
        padding: 16px 24px;
        gap: 16px;
        text-align: center;
        align-items: center;
    }

    body.authenticated footer .footer-left {
        order: 2;
    }

    body.authenticated footer .footer-right {
        order: 1;
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    body.authenticated footer > div,
    body.authenticated footer > nav {
        margin-right: 0;
    }

    /* Mobile: Close button positioning */
    #quicklaunch .mobile-close-btn {
        display: block !important;
        position: absolute;
        top: 18px;
        right: 24px;
        background: transparent !important;
        border: none !important;
        color: #ffffff !important;
        font-size: 24px !important;
        font-weight: bold !important;
        padding: 8px !important;
        cursor: pointer;
        z-index: 2001 !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 4px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    #quicklaunch .mobile-close-btn:hover {
        background: rgba(227, 43, 36, 0.1) !important;
    }

    /* Mobile: Hamburger stays visible when nav is open */
    body.authenticated.with-quicklaunch .hamburger-menu-toggle {
        z-index: 1998;
    }

    /* Mobile: Hide navigation by default on small screens */
    body.authenticated {
        overflow-x: auto;
    }

    body.authenticated #quicklaunch {
        display: block;
    }
}

/* Figma-style breadcrumbs */
.survey-breadcrumbs-figma {
    margin: 0 0 24px 0;
    border-bottom: 1px solid var(--pc-grey-1, #323232);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.breadcrumb-container-figma {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.survey-header-actions-figma {
    display: flex;
    align-items: center;
    gap: 16px;
}

.survey-header-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.survey-header-action-btn img,
.survey-header-action-btn svg {
    display: block;
}

.survey-header-action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.survey-header-action-btn:active {
    transform: translateY(0);
}

.survey-header-action-btn:focus-visible {
    outline: 2px solid #6dd9c5;
    outline-offset: 2px;
}

.survey-header-actions-figma .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media screen and (max-width: 768px) {
    .survey-breadcrumbs-figma {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .survey-header-actions-figma {
        justify-content: space-around;
        padding: 10px 16px;
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    .breadcrumb-container-figma {
        display: flex;
        align-items: center;
        gap: 24px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        padding: 0 calc(50vw - 60px);
        -webkit-overflow-scrolling: touch;
    }

    .breadcrumb-container-figma::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-step-figma {
        scroll-snap-align: center;
        flex-shrink: 0;
    }

    .breadcrumb-arrow-figma {
        flex-shrink: 0;
    }
}

.breadcrumb-step-figma {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 36px;
    gap: 10px;
    text-decoration: none;
    position: relative;
}

.breadcrumb-step-figma.completed {
    border-bottom: 1px solid var(--pc-grey-1, #323232);
}

.breadcrumb-step-figma.current {
    border-bottom: 3px solid var(--pc-green-1, #6dd9c5);
}

.step-name-figma {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: normal;
    text-align: center;
    margin: 0;
    text-shadow: 0px 0px 150px rgba(255, 255, 255, 0.75);
}

.breadcrumb-step-figma.completed .step-name-figma {
    color: var(--pc-green-1, #6dd9c5);
    font-weight: 600;
}

.breadcrumb-step-figma.current .step-name-figma {
    color: #ffffff;
    font-weight: 700;
}

.breadcrumb-step-figma.upcoming .step-name-figma {
    color: var(--pc-grey-2, #707070);
    font-weight: 600;
}

.breadcrumb-icon-figma {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.breadcrumb-arrow-figma {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 10px;
    height: 16px;
}

.breadcrumb-arrow-figma.active svg {
    stroke: var(--pc-green-1, #6dd9c5);
}

.breadcrumb-arrow-figma.inactive svg {
    stroke: var(--pc-grey-1, #323232);
}

.breadcrumb-step-figma:hover .step-name-figma {
    opacity: 0.8;
}

/* Clickable breadcrumb styles */
.breadcrumb-step-figma.clickable {
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.breadcrumb-step-figma.clickable:hover {
    transform: translateY(-2px);
}

.breadcrumb-step-figma.clickable:hover .step-name-figma {
    color: var(--pc-green-1, #6dd9c5) !important;
    opacity: 1;
}

.breadcrumb-step-figma.clickable.upcoming:hover .step-name-figma {
    color: var(--pc-green-1, #6dd9c5) !important;
}

.breadcrumb-step-figma.clickable.completed:hover .step-name-figma {
    color: #ffffff !important;
}

.breadcrumb-step-figma.clickable.current:hover .step-name-figma {
    color: #ffffff !important;
}


/* Figma-style question card */
.question-card-figma-wrapper {
    background: rgba(14, 15, 17, 0.5);
    border: 2px solid var(--pc-green-1, #6dd9c5);
    border-radius: 14px;
    overflow: visible;
    margin-bottom: 24px;
    position: relative;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Dragging state */
.question-card-figma-wrapper.dragging {
    opacity: 0.5;
    transform: scale(0.98);
}

/* Drag over indicators */
.question-card-figma-wrapper.drag-over-top::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pc-green-1, #6dd9c5);
    border-radius: 2px;
    z-index: 10;
}

.question-card-figma-wrapper.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--pc-green-1, #6dd9c5);
    border-radius: 2px;
    z-index: 10;
}

/* Question type header */
.question-type-header-figma {
    background: rgba(109, 217, 197, 0.15);
    border-bottom: 2px solid var(--pc-green-1, #6dd9c5);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.question-type-title-figma {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    font-style: normal;
    color: var(--pc-green-1, #6dd9c5);
    margin: 0;
    letter-spacing: -0.44px;
    line-height: 27px;
}

/* Question content card */
.question-content-card-figma {
    background: rgba(14, 15, 17, 0.5);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px 8px 24px 8px;
    position: relative;
    border-radius: 14px;
}

/* Drag handle */
.drag-handle-figma {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    cursor: grab;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.drag-handle-figma:active {
    cursor: grabbing;
}

/* Question inner content */
.question-inner-content-figma {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-right: 16px;
}

/* Question header */
.question-header-figma {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

@media screen and (max-width: 768px) {
    .question-header-figma {
        flex-direction: column;
        align-items: flex-start;
    }
}

.question-text-container-figma {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.question-textblock-container-figma {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
}

.question-number-figma {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--pc-grey-2, #707070);
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.4395px;
    line-height: 27px;
    min-width: 31px;
}

.question-text-figma {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.4395px;
    line-height: 27px;
}

.required-asterisk-figma {
    color: #fb5753;
    font-weight: 700;
    margin-left: 2px;
}

/* Action buttons */
.question-actions-figma {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

.question-action-btn-figma {
    background: transparent;
    border: none;
    border-radius: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 6px;
    color: var(--pc-green-1);
}

.question-action-btn-figma:hover {
    background: var(--pc-grey-1, #323232);
    color: var(--pc-green-1, #6dd9c5);
}


/* Separator */
.question-separator-figma {
    width: 100%;
    height: 1px;
    background: var(--pc-grey-1, #323232);
    border-radius: 10px;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5);
}

/* Question options content */
.question-options-content-figma {
    width: 100%;
}

/* Hover state for the whole card */
.question-card-figma-wrapper:hover {
    box-shadow: 0px 0px 200px 0px rgba(109, 217, 197, 0.1);
}

/* Not configured questions (no green border) */
.question-card-figma-wrapper.not-configured {
    border: 2px solid var(--pc-grey-1, #323232);
}

.question-card-figma-wrapper.not-configured .question-type-header-figma {
    background: transparent;
    border-bottom: 0;
}

/* Figma-style options */
.options-figma-horizontal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
}

.option-figma-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.option-icon-figma {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.option-label-figma {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 20px;
    letter-spacing: -0.1504px;
    /* Allow long option text to wrap nicely in the design preview */
    white-space: normal;
    word-break: break-word;
}

/* Figma-style rating scale options */
.rating-scale-options-figma-horizontal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    gap: 12px;
}

.rating-option-figma-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rating-radio-icon-figma {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Unchecked state - gray border */
.rating-option-figma-item:not(:first-child) .rating-radio-icon-figma circle:last-child {
    fill: transparent;
}

.rating-option-label-figma {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    margin: 0;
    line-height: 20px;
    letter-spacing: -0.1504px;
    /* Allow long option text to wrap nicely in the design preview */
    white-space: normal;
    word-break: break-word;
}



/* Design Page Layout */
.design-main-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 0 24px;
    margin: 0 auto 60px auto;
    position: relative;
    max-width: 1090px;
    justify-content: center;
}

/* Left Column - Questions */
.design-questions-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1090px;
}

.design-section-header {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 20px;
}

.design-section-header h3 {
    color: #10b981;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.design-questions-list {
    display: flex;
    flex-direction: column;
    /* gap: 16px; */
}

/* Add Question Button - Figma Style */
.design-add-question-wrapper {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.design-add-question-btn {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    padding: 24px;
    height: 56px;
    width: 212px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all .3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-green-1, #6dd9c5);
    text-transform: uppercase;
    box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.25);
}

.design-add-question-btn:hover {
    background: rgba(109, 217, 197, 0.35);
}

@media screen and (max-width: 768px) {
    .design-add-question-btn {
        width: 100%;
    }
}

.design-add-question-btn svg {
    stroke: currentColor;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Add Content Dropdown */
.design-add-question-wrapper {
    position: relative;
}

.add-content-dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    background: var(--pc-grey-1, #323232);
    border: 1px solid rgba(109, 217, 197, 0.2);
    border-radius: 10px;
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    padding: 8px;
}

.add-content-dropdown.show {
    opacity: 1;
    visibility: visible;
}

.add-content-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.add-content-dropdown .dropdown-item:hover {
    background: rgba(109, 217, 197, 0.15);
    color: var(--pc-green-1, #6dd9c5);
}

.add-content-dropdown .dropdown-item svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.add-content-dropdown .dropdown-item span {
    flex: 1;
}

/* Form Actions (Navigation Buttons) - Figma Style */
.design-questions-column .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 16px;
}

.design-questions-column .form-actions .button {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    padding: 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    cursor: pointer;
    transition: all .3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-green-1, #6dd9c5);
    text-decoration: none;
    text-transform: uppercase;
}

.design-questions-column .form-actions .button:hover {
    background: rgba(109, 217, 197, 0.35);
}

.design-questions-column .form-actions .button.ghost {
    background: rgba(109, 217, 197, 0.25);
    color: var(--pc-green-1, #6dd9c5);
}

.design-questions-column .form-actions .button.primary {
    background: rgba(109, 217, 197, 0.25);
    color: var(--pc-green-1, #6dd9c5);
}

/* Back button - no padding on desktop */
.design-questions-column .form-actions .button.back-btn {
    padding: 0;
}

@media screen and (max-width: 768px) {
    .design-questions-column .form-actions {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        width: 100%;
        gap: 12px;
        margin-top: 24px;
    }

    .design-questions-column .form-actions .button,
    .design-questions-column .form-actions .button.primary,
    .design-questions-column .form-actions .button.ghost,
    .design-questions-column .form-actions .button.back-btn,
    .design-questions-column .form-actions a.button,
    .design-questions-column .form-actions a.button.primary,
    .design-questions-column .form-actions button.button,
    .design-questions-column .form-actions button.button.primary {
        flex: 1;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 48px;
        padding: 12px 16px !important;
        font-size: 13px;
        gap: 8px;
        box-sizing: border-box;
    }

    .design-questions-column .form-actions .button svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }
}

/* Question Cards Styling */
.question-saved-container {
    background: #1f2937;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 20px;
    transition: all 0.2s ease;
}

.question-saved-container:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.question-saved-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.question-text-saved {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    min-width: 200px;
}

.question-number-badge-saved {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 4px;
}

.question-type-badge-saved {
    color: #10b981;
    font-size: 12px;
    font-weight: 500;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.question-actions {
    display: flex;
    gap: 8px;
}

.question-action-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.2s ease;
}

.question-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.question-action-btn.edit:hover {
    color: #10b981;
    border-color: #10b981;
}

.question-action-btn.delete:hover {
    color: #ef4444;
    border-color: #ef4444;
}

/* Not Configured State */
.not-configured {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    font-style: italic;
}

/* Responsive */
@media (max-width: 1200px) {
    .design-main-layout {
        flex-direction: column;
        gap: 24px;
        max-width: 100%;
        padding: 0 16px;
    }

    .design-questions-column {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .design-main-layout {
        padding: 0 12px;
        gap: 20px;
    }
}

/* Drag handle styling */
.drag-handle-icon {
    cursor: grab;
    user-select: none;
}

.drag-handle-icon:active {
    cursor: grabbing;
}

.dashboardwith-quicklaunch {
    padding-top: 0;
}

.dashboardwith-quicklaunch > section {
    padding-top: 0;
}

/* ============================================
   SAMPLE PAGE STYLES
   ============================================ */

/* Sample Page Layout */
.sample-main-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 0 24px;
    margin: 0 auto 60px auto;
    position: relative;
    max-width: 1090px;
    justify-content: center;
}

.sample-content-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 1090px;
}

/* Form Actions for Sample Page */
.sample-content-column .form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    gap: 16px;
}

.sample-content-column .form-actions .button {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    padding: 24px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    cursor: pointer;
    transition: all .3s ease;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--pc-green-1, #6dd9c5);
    text-decoration: none;
    text-transform: uppercase;
}

.sample-content-column .form-actions .button:hover {
    background: rgba(109, 217, 197, 0.35);
}

.sample-content-column .form-actions .button.ghost {
    background: rgba(109, 217, 197, 0.25);
    color: var(--pc-green-1, #6dd9c5);
}

.sample-content-column .form-actions .button.primary {
    background: rgba(109, 217, 197, 0.25);
    color: var(--pc-green-1, #6dd9c5);
}

.sample-content-column .form-actions .button.back-btn {
    padding: 0;
}
.sample-content-column .form-actions .button.next-btn {
    padding: 0;
}

/* Sample Section Styles */
.sample-section {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sample-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #ffffff;
}

.sample-section .section-description {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

/* Sample Cards */
.sample-cards {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    width: 100%;
}

.sample-card {
    background: #1f2937;
    border: 2px solid #374151;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
}

.sample-card:hover:not(.disabled) {
    border-color: var(--pc-green-1, #6dd9c5);
    box-shadow: 0 4px 12px rgba(109, 217, 197, 0.15);
}

.sample-card.selected {
    border-color: var(--pc-green-1, #6dd9c5);
    background-color: rgba(109, 217, 197, 0.05);
}

.sample-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sample-card.disabled:hover {
    border-color: #374151;
    box-shadow: none;
}

.sample-card.disabled .sample-card-icon {
    color: rgba(255, 255, 255, 0.4);
}

.sample-card.disabled .sample-card-content h4 {
    color: rgba(255, 255, 255, 0.5);
}

.sample-card.disabled .sample-card-content p {
    color: rgba(255, 255, 255, 0.3);
}

.sample-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
}

.sample-card-icon {
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 125px;
    background: transparent;
    border-radius: 12px;
}

.sample-card.selected .sample-card-icon {
    color: var(--pc-green-1, #6dd9c5);
}

.sample-card:hover:not(.disabled) .sample-card-icon {
    color: var(--pc-green-1, #6dd9c5);
}

.sample-card-header h4 {
    display: none;
}

.sample-card-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sample-card-content h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin: 0 0 0.5rem 0;
    color: #ffffff;
}

.sample-card.selected .sample-card-content h4 {
    color: var(--pc-green-1, #6dd9c5);
}

.sample-card:hover:not(.disabled) .sample-card-content h4 {
    color: var(--pc-green-1, #6dd9c5);
}

.sample-card-content p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    margin: 0;
}

.sample-card-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.sample-card-title-row h4 {
    margin: 0;
}

.sample-card .info-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: help;
    flex-shrink: 0;
}

/* Attached Sample Display */
.attached-sample {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(109, 217, 197, 0.15);
    border-radius: 6px;
    font-size: 0.875rem;
    width: 100%;
}

.attached-sample .checkmark-icon {
    color: var(--pc-green-1, #6dd9c5);
    display: flex;
    align-items: center;
}

.attached-sample .sample-name {
    font-weight: 500;
    flex: 1;
    color: var(--pc-green-1, #6dd9c5);
}

.attached-sample .remove-button {
    background: transparent;
    color: #ef4444;
    border: none;
    border-radius: 4px;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.attached-sample .remove-button:hover {
    background: rgba(239, 68, 68, 0.2);
}

.attached-sample .remove-button svg {
    fill: currentColor;
}

/* Sample Modal Styles */
.modal-content.sample-modal {
    width: 100%;
    max-width: 720px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    overflow: hidden;
}

/* Contact List Modal - Dark Theme */
.modal-content.sample-list-modal {
    background: #1a1d24;
    border: 1px solid #2d3139;
    max-width: 600px;
}

@media (max-width: 768px) {
    .modal-content.sample-list-modal {
        overflow-y: auto;
        max-height: 90vh;
    }
}

.sample-list-modal .sample-modal-header {
    background: #1a1d24;
    border-bottom: 1px solid #2d3139;
    padding: 1.25rem 1.5rem;
}

.sample-list-modal .modal-title {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.25rem;
}

.sample-list-modal .modal-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sample-list-modal .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #3d4149;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.sample-list-modal .icon-button:hover {
    background: rgba(109, 217, 197, 0.1);
    border-color: var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
}

.sample-list-modal .modal-body {
    padding: 1.25rem 1.5rem;
    background: #1a1d24;
}

/* Search Wrapper */
.sample-search-wrapper {
    margin-bottom: 1.25rem;
}

.sample-search-input {
    position: relative;
    display: flex;
    align-items: center;
}

.sample-search-input .search-icon {
    position: absolute;
    left: 1rem;
    color: #6b7280;
    pointer-events: none;
}

.sample-search-input input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    background: #242830;
    border: 1px solid #3d4149;
    border-radius: 8px;
    color: #ffffff;
    font-size: 0.9375rem;
    font-family: 'Montserrat', sans-serif;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sample-search-input input::placeholder {
    color: #6b7280;
}

.sample-search-input input:focus {
    outline: none;
    border-color: var(--pc-green-1, #6dd9c5);
    box-shadow: 0 0 0 3px rgba(109, 217, 197, 0.1);
}

/* Contact Lists Container */
.sample-lists-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.sample-lists-container::-webkit-scrollbar {
    width: 6px;
}

.sample-lists-container::-webkit-scrollbar-track {
    background: #242830;
    border-radius: 3px;
}

.sample-lists-container::-webkit-scrollbar-thumb {
    background: #3d4149;
    border-radius: 3px;
}

.sample-lists-container::-webkit-scrollbar-thumb:hover {
    background: #4d5159;
}

/* Contact List Item Card */
.sample-list-modal .sample-list-item {
    background: #242830;
    border: 1px solid #3d4149;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sample-list-modal .sample-list-item:hover {
    border-color: var(--pc-green-1, #6dd9c5);
    background: #2a2f38;
    box-shadow: 0 4px 12px rgba(109, 217, 197, 0.1);
}

.sample-list-modal .sample-list-title {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.375rem;
}

.sample-list-modal .sample-list-description {
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sample-list-modal .sample-list-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #6b7280;
    font-family: 'Montserrat', sans-serif;
}

.sample-list-modal .sample-list-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Loading State */
.sample-list-modal .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #9ca3af;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #3d4149;
    border-top-color: var(--pc-green-1, #6dd9c5);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
}

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

/* Empty State */
.sample-list-modal .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #9ca3af;
    text-align: center;
}

.sample-list-modal .empty-state p {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
}

/* Pagination */
.sample-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.sample-pagination button {
    padding: 0.5rem 1rem;
    border: 1px solid #3d4149;
    background: transparent;
    border-radius: 6px;
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sample-pagination button:hover:not(:disabled) {
    background: rgba(109, 217, 197, 0.1);
    border-color: var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
}

.sample-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.sample-pagination button.active {
    background: var(--pc-green-1, #6dd9c5);
    border-color: var(--pc-green-1, #6dd9c5);
    color: #1a1d24;
    font-weight: 600;
}

/* Modal Footer */
.sample-list-modal .modal-footer {
    background: #1a1d24;
    border-top: 1px solid #2d3139;
    padding: 1rem 1.5rem;
    min-height: 56px;
}

.sample-list-modal .modal-footer.sample-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sample-list-modal .modal-footer.sample-modal-footer:empty,
.sample-list-modal .modal-footer.sample-modal-footer:has(.sample-pagination[style*="display: none"]) {
    display: none;
}

.sample-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.sample-modal .modal-body {
    padding: 1rem 1.25rem 1.25rem;
}

/* Placeholder Content (for Coming Soon modals) */
.sample-list-modal .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
}

.sample-list-modal .placeholder-icon {
    color: var(--pc-green-1, #6dd9c5);
    opacity: 0.6;
    margin-bottom: 1.25rem;
}

.sample-list-modal .placeholder-title {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0 0 0.75rem 0;
}

.sample-list-modal .placeholder-description {
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}

/* Upload Wizard Modal - Dark Theme */
.upload-wizard-modal {
    max-width: 560px;
}

.upload-wizard-modal .header-title-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.upload-wizard-modal .step-indicator {
    color: var(--pc-green-1, #6dd9c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.upload-wizard-modal .wizard-description {
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
}

/* File Dropzone - Dark Theme */
.upload-wizard-modal .file-dropzone {
    border: 2px dashed #3d4149;
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
    background: #242830;
}

.upload-wizard-modal .file-dropzone:hover,
.upload-wizard-modal .file-dropzone.dragover {
    border-color: var(--pc-green-1, #6dd9c5);
    background: rgba(109, 217, 197, 0.05);
}

.upload-wizard-modal .upload-icon {
    color: #6b7280;
    margin-bottom: 0.75rem;
}

.upload-wizard-modal .file-dropzone:hover .upload-icon,
.upload-wizard-modal .file-dropzone.dragover .upload-icon {
    color: var(--pc-green-1, #6dd9c5);
}

.upload-wizard-modal .dropzone-text {
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    margin: 0;
}

.upload-wizard-modal .file-name {
    color: var(--pc-green-1, #6dd9c5);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9375rem;
    margin: 0.5rem 0 0 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.upload-wizard-modal .dropzone-content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Download Template Button */
.upload-wizard-modal .btn-download-template {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid #3d4149;
    border-radius: 8px;
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1.25rem;
}

.upload-wizard-modal .btn-download-template:hover {
    background: rgba(109, 217, 197, 0.1);
    border-color: var(--pc-green-1, #6dd9c5);
    color: var(--pc-green-1, #6dd9c5);
}

/* Form Groups - Dark Theme */
.upload-wizard-modal .upload-form-group {
    margin-bottom: 1rem;
}

.upload-wizard-modal .upload-form-group label {
    display: block;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.upload-wizard-modal .upload-form-group .required {
    color: #ef4444;
    margin-left: 0.25rem;
}

.upload-form-group input[type="text"] {
    background: #242830 !important;
    border: 1px solid #3d4149 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
    padding: 12px 16px !important;
    height: 48px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
}

.upload-form-group textarea {
    background: #242830 !important;
    border: 1px solid #3d4149 !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 0.9375rem !important;
    padding: 12px 16px !important;
    min-height: 48px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-sizing: border-box !important;
    height: auto !important;
}

/* Override for link preview - light theme for ALL form inputs */
.link-preview input[type="text"],
.link-preview .upload-form-group input[type="text"] {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    height: 48px !important;
}

.link-preview textarea,
.link-preview .upload-form-group textarea,
.link-preview .preview-textarea {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    color: #1f2937 !important;
    min-height: 48px !important;
    height: auto !important;
}

.link-preview input[type="text"]:focus,
.link-preview textarea:focus,
.link-preview .upload-form-group input[type="text"]:focus,
.link-preview .upload-form-group textarea:focus,
.link-preview .preview-textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
}

/* Override for link preview - ranking question buttons */
.link-preview .move-up-btn,
.link-preview .move-down-btn {
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    color: #374151 !important;
}

.link-preview .move-up-btn:hover,
.link-preview .move-down-btn:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
}

.link-preview .move-up-btn:disabled,
.link-preview .move-down-btn:disabled {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
    opacity: 0.6;
    cursor: not-allowed !important;
}

.upload-wizard-modal .upload-form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #242830;
    border: 1px solid #3d4149;
    border-radius: 8px;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.upload-wizard-modal .upload-form-control::placeholder {
    color: #6b7280;
}

/* Style select options to have dark text */
.upload-wizard-modal select.upload-form-control option {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

.upload-wizard-modal .upload-form-control:focus {
    outline: none;
    border-color: var(--pc-green-1, #6dd9c5);
    box-shadow: 0 0 0 3px rgba(109, 217, 197, 0.1);
}

.upload-wizard-modal textarea.upload-form-control {
    resize: vertical;
    min-height: 80px;
}

/* Upload Footer */
.upload-wizard-modal .upload-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.upload-wizard-modal .button.ghost {
    background: transparent;
    border: 1px solid #3d4149;
    color: #9ca3af;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-wizard-modal .button.ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #6b7280;
    color: #ffffff;
}

.upload-wizard-modal .button.primary {
    background: var(--pc-green-1, #6dd9c5);
    border: none;
    color: #1a1d24;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-wizard-modal .button.primary:hover:not(:disabled) {
    background: #5bc4b0;
}

.upload-wizard-modal .button.primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Validation Results - Dark Theme */
.upload-wizard-modal .validation-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.upload-wizard-modal .validation-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: #242830;
    border: 1px solid #3d4149;
}

.upload-wizard-modal .validation-item.validation-success {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.1);
}

.upload-wizard-modal .validation-item.validation-success .validation-icon {
    color: #10b981;
}

.upload-wizard-modal .validation-item.validation-warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.1);
}

.upload-wizard-modal .validation-item.validation-warning .validation-icon {
    color: #f59e0b;
}

.upload-wizard-modal .validation-item.validation-error {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.upload-wizard-modal .validation-item.validation-error .validation-icon {
    color: #ef4444;
}

.upload-wizard-modal .validation-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-wizard-modal .validation-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.upload-wizard-modal .validation-text {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
}

.upload-wizard-modal .validation-message {
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
}

/* Error Report Link */
.upload-wizard-modal .error-report-link {
    margin-bottom: 1rem;
}

.upload-wizard-modal .error-report-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pc-green-1, #6dd9c5);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.upload-wizard-modal .error-report-link a:hover {
    color: #5bc4b0;
    text-decoration: underline;
}

/* Details Section */
.upload-wizard-modal .details-section {
    margin-top: 1rem;
}

.upload-wizard-modal .btn-collapse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #242830;
    border: 1px solid #3d4149;
    border-radius: 8px;
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-wizard-modal .btn-collapse:hover {
    background: #2a2f38;
    color: #ffffff;
}

.upload-wizard-modal .btn-collapse svg {
    transition: transform 0.2s ease;
}

.upload-wizard-modal .details-content {
    margin-top: 0.75rem;
    padding: 1rem;
    background: #242830;
    border: 1px solid #3d4149;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.upload-wizard-modal .details-content .error-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid #3d4149;
}

.upload-wizard-modal .details-content .error-row:last-child {
    border-bottom: none;
}

.upload-wizard-modal .details-content .error-row-header {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.upload-wizard-modal .details-content .error-row-details {
    color: #9ca3af;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8125rem;
    margin-left: 1rem;
}

.upload-wizard-modal .details-content .error-row-details > div {
    margin-bottom: 0.25rem;
}

.upload-wizard-modal .details-content .error-reason {
    color: #ef4444;
    font-weight: 500;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #3d4149;
}

/* Success Message */
.upload-wizard-modal .success-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.upload-wizard-modal .success-icon {
    color: var(--pc-green-1, #6dd9c5);
    margin-bottom: 1rem;
}

.upload-wizard-modal .success-message p {
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0;
    max-width: 320px;
}

/* Summary Grid */
.upload-wizard-modal .summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    background: #242830;
    border: 1px solid #3d4149;
    border-radius: 10px;
}

.upload-wizard-modal .summary-item label {
    display: block;
    color: #6b7280;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.upload-wizard-modal .summary-item p {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

/* Mobile responsive for upload wizard modal */
@media (max-width: 768px) {
    .upload-wizard-modal .file-dropzone {
        padding: 1.5rem 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .upload-wizard-modal .dropzone-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 0.5rem !important;
    }

    .upload-wizard-modal .file-name {
        width: 100% !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        padding: 0 0.5rem !important;
        box-sizing: border-box !important;
        font-size: 0.8125rem !important;
    }

    .upload-wizard-modal .dropzone-text {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 0.5rem !important;
    }

    .upload-wizard-modal .upload-footer {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .upload-wizard-modal .upload-footer .button {
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        line-height: 1.4 !important;
        min-height: 44px !important;
        height: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Step indicator and title */
    .upload-wizard-modal .step-indicator {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .upload-wizard-modal .modal-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        box-sizing: border-box;
    }

    .upload-wizard-modal .wizard-description {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Success message */
    .upload-wizard-modal .success-message p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
        box-sizing: border-box;
        padding: 0 0.5rem;
    }

    /* Summary grid - mobile adjustments */
    .upload-wizard-modal .summary-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    .upload-wizard-modal .summary-item {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .upload-wizard-modal .summary-item label {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    .upload-wizard-modal .summary-item p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .upload-wizard-modal .file-dropzone {
        padding: 1rem 0.75rem !important;
    }

    .upload-wizard-modal .file-name {
        font-size: 0.75rem !important;
        padding: 0 0.25rem !important;
    }

    .upload-wizard-modal .dropzone-text {
        font-size: 0.8125rem !important;
        padding: 0 0.25rem !important;
    }

    .upload-wizard-modal .upload-footer {
        flex-direction: column;
    }

    .upload-wizard-modal .upload-footer .button {
        width: 100% !important;
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    /* Summary grid - smaller mobile */
    .upload-wizard-modal .summary-grid {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .upload-wizard-modal .summary-item label {
        font-size: 0.6875rem !important;
    }

    .upload-wizard-modal .summary-item p {
        font-size: 1rem !important;
    }

    .upload-wizard-modal .success-message p {
        font-size: 0.875rem !important;
        padding: 0 0.25rem !important;
    }

    .upload-wizard-modal .modal-title {
        font-size: 1.125rem !important;
    }

    .upload-wizard-modal .wizard-description {
        font-size: 0.875rem !important;
    }
}

.sample-search {
    position: relative;
    margin-bottom: 1rem;
}

.sample-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.25rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
}

.sample-search .left-icon {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: #6b7280;
}

/* Contact Lists Grid */
.sample-lists-grid {
    display: grid;
    gap: 1rem;
    max-height: 400px;
    overflow-y: auto;
}

.sample-lists-grid--cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    max-height: 420px;
    overflow: auto;
}

.sample-list-item {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.875rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
    cursor: pointer;
}

.sample-list-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,0.15);
    background: #f8fafc;
}

.sample-list-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.sample-list-description {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    min-height: 2.5rem;
}

.sample-list-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #9ca3af;
}

/* Sample Page Pagination */
.sample-section .pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sample-section .pagination button {
    padding: 0.5rem 1rem;
    border: 1px solid #e5e7eb;
    background: white;
    border-radius: 4px;
    cursor: pointer;
}

.sample-section .pagination button:hover:not(:disabled) {
    background: #f3f4f6;
}

.sample-section .pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sample-section .pagination button.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

/* Upload Wizard Modal Styles */
.upload-modal .modal-content {
    max-width: 600px;
}

.upload-modal .modal-large {
    max-width: 700px !important;
}

.upload-step {
    display: none;
}

.upload-step.active {
    display: block;
}

.upload-modal .step-indicator {
    color: #6b7280;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
}

.upload-modal .wizard-description {
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* File Dropzone */
.file-dropzone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1rem;
    background: #f9fafb;
}

.file-dropzone:hover,
.file-dropzone.dragover {
    border-color: #2563eb;
    background: #eff6ff;
}

.file-dropzone .upload-icon {
    margin: 0 auto 1rem;
    display: block;
}

.file-dropzone .dropzone-text {
    color: #6b7280;
    font-size: 0.875rem;
    margin: 0;
}

.file-dropzone .file-name {
    color: #d1dfff;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* Upload Form Controls */
.upload-modal .form-group {
    margin-bottom: 1.25rem;
}

.upload-modal .form-group label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.upload-modal .form-control {
    width: 100%;
    padding: 12px 16px;
    height: 48px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    box-sizing: border-box;
}

.upload-modal .form-control:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Validation Results Table */
.validation-results {
    padding: 1rem 0;
}

.validation-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.validation-table thead {
    border-bottom: 2px solid #e5e7eb;
}

.validation-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.validation-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
}

.validation-table tbody tr:last-child {
    border-bottom: none;
}

.validation-table td {
    padding: 1rem;
    vertical-align: middle;
}

.validation-table .status-cell {
    width: 50%;
}

.validation-table .message-cell {
    width: 50%;
    color: #6b7280;
    font-size: 0.875rem;
}

.status-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-icon {
    font-size: 1.25rem;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.status-icon.status-success {
    color: #10b981;
}

.status-icon.status-warning {
    color: #f59e0b;
}

.status-icon.status-error {
    color: #ef4444;
}

.status-text {
    font-weight: 500;
    color: #111827;
    font-size: 0.875rem;
}

/* Collapse Button */
.btn-collapse {
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-collapse:hover {
    background: #e5e7eb;
}

.details-content {
    margin-top: 1rem;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    max-height: 300px;
    overflow-y: auto;
}

/* Error Row Display */
.error-row {
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.875rem;
}

.error-row:last-child {
    border-bottom: none;
}

.error-row-header {
    margin-bottom: 0.5rem;
    color: #374151;
    font-size: 0.9375rem;
}

.error-row-details {
    margin-left: 1rem;
    color: #6b7280;
}

.error-row-details > div {
    margin-bottom: 0.25rem;
}

.error-row-details > div:last-child {
    margin-bottom: 0;
}

.error-reason {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    color: #dc2626;
    font-weight: 500;
}

/* Success Message Display */
.upload-modal .success-message {
    text-align: center;
    padding: 2rem 0;
}

.upload-modal .success-icon {
    margin: 0 auto 1rem;
}

.upload-modal .success-message p {
    font-size: 1.125rem;
    color: #374151;
    margin: 0;
}

/* Summary Details Grid */
.upload-modal .summary-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f9fafb;
    border-radius: 8px;
    margin-top: 1.5rem;
}

.upload-modal .summary-item label {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

.upload-modal .summary-item p {
    font-weight: 600;
    color: #111827;
    font-size: 1.125rem;
    margin: 0;
}

/* Upload Modal Buttons */
.upload-modal .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.upload-modal .btn-primary {
    background: #2563eb;
    color: white;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.2);
}

.upload-modal .btn-primary:hover:not(:disabled) {
    background: #1d4ed8;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.upload-modal .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.upload-modal .btn-secondary {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.upload-modal .btn-secondary:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.upload-modal .btn-link {
    background: none;
    border: none;
    color: #2563eb;
    padding: 0.5rem 1rem;
    text-decoration: none;
    cursor: pointer;
}

.upload-modal .btn-link:hover {
    text-decoration: underline;
}

.upload-modal .btn-block {
    width: 100%;
}

/* Upload Modal Close Button */
.upload-modal .close-modal {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-modal .close-modal:hover {
    color: #374151;
}

/* Upload Modal Structure */
.upload-modal.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.upload-modal.modal.show {
    display: flex !important;
}

.upload-modal .modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upload-modal .modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
}

.upload-modal .modal-body {
    padding: 1.5rem;
}

.upload-modal .modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.upload-modal .footer-actions-right {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Sample Page Responsive Styles */
@media (max-width: 1200px) {
    .sample-main-layout {
        flex-direction: column;
        gap: 24px;
        max-width: 100%;
        padding: 0 16px;
    }

    .sample-content-column {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .sample-main-layout {
        padding: 0 12px;
        gap: 20px;
    }

    .sample-content-column .form-actions {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        width: 100%;
        gap: 12px;
        margin-top: 24px;
    }

    .sample-content-column .form-actions .button,
    .sample-content-column .form-actions .button.primary,
    .sample-content-column .form-actions .button.ghost,
    .sample-content-column .form-actions .button.back-btn,
    .sample-content-column .form-actions a.button,
    .sample-content-column .form-actions a.button.primary,
    .sample-content-column .form-actions button.button,
    .sample-content-column .form-actions button.button.primary {
        flex: 1;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: 48px;
        padding: 12px 16px !important;
        font-size: 13px;
        gap: 8px;
        box-sizing: border-box;
    }

    .sample-content-column .form-actions .button svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .sample-cards {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sample-card {
        gap: 1rem;
        aspect-ratio: auto;
    }

    .sample-card-icon {
        width: 48px;
        height: 48px;
    }

    .sample-card-icon svg {
        width: 64px;
        height: 64px;
    }

    .sample-card-content h4 {
        font-size: 1rem;
    }

    .sample-card-content p {
        font-size: 0.8125rem;
    }

    .sample-card-title-row {
        justify-content: flex-start;
    }

    .attached-sample {
        justify-content: flex-start;
    }

    .sample-lists-grid--cards {
        grid-template-columns: 1fr;
    }
}





/* 12-Column Grid System */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    width: calc(100% + 20px);
}

.w-100 {
    width: 100%;
}

/* Column Classes - 12 Grid System */
.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    min-width: 0;
}

/* Grid Column Styling */
.filters-section [class*='col-'] {
    display: flex;
    align-items: center;
}

.filters-section .col-4:first-child {
    justify-content: flex-start;
}

.filters-section .col-3 {
    justify-content: center;
}

.filters-section .col-5 {
    justify-content: flex-end;
}

/* Mobile Responsive - All columns become full-width */
@media (max-width: 1200px) {
    .row {
        flex-wrap: wrap;
        margin: 0;
        width: 100%;
    }

    [class*='col-'] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
        padding: 0;
    }

    .filters-section [class*='col-'] {
        justify-content: flex-start;
    }
}

/* Mobile responsive styles for add team members modal */
@media (max-width: 768px) {
    .add-team-modal-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .add-team-modal-footer .button {
        width: 100%;
        order: 2;
    }

    .add-team-modal-footer .button.primary {
        order: 1;
    }

    /* Setup page form actions - make both buttons same size on mobile */
    .form-actions.setup-page-actions {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    /* Override all existing button styles with highest specificity */
    .survey-wizard .form-actions.setup-page-actions .button,
    .survey-wizard .form-actions.setup-page-actions .button.primary,
    .survey-wizard .form-actions.setup-page-actions .button.ghost,
    .survey-wizard .form-actions.setup-page-actions a.button,
    .survey-wizard .form-actions.setup-page-actions a.button.ghost,
    .form-actions.setup-page-actions .button,
    .form-actions.setup-page-actions .button.primary,
    .form-actions.setup-page-actions .button.ghost,
    .form-actions.setup-page-actions a.button,
    .form-actions.setup-page-actions a.button.ghost {
        width: 100% !important;
        text-align: center !important;
        flex: none !important;
        min-width: auto !important;
        max-width: none !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 50px !important;
    }

    /* Ensure primary button appears first */
    .survey-wizard .form-actions.setup-page-actions .button.primary,
    .form-actions.setup-page-actions .button.primary {
        order: 1 !important;
    }

    /* Ensure ghost button appears second */
    .survey-wizard .form-actions.setup-page-actions .button.ghost,
    .survey-wizard .form-actions.setup-page-actions a.button.ghost,
    .form-actions.setup-page-actions .button.ghost,
    .form-actions.setup-page-actions a.button.ghost {
        order: 2 !important;
    }
}



/* Page Lock Notification Styles */
.page-lock-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: slideInRight 0.3s ease-out;
}

.page-lock-notification.info {
    border-left: 4px solid #2563eb;
}

.page-lock-notification.error {
    border-left: 4px solid #dc2626;
}

.notification-content {
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.notification-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.notification-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: #374151;
}

.notification-close {
    background: none;
    border: none;
    font-size: 18px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-close:hover {
    color: #374151;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .page-lock-notification {
        left: 20px;
        right: 20px;
        max-width: none;
    }
}

/* Question Bank Search/Filter Responsive */
@media (min-width: 992px) {
    .question-bank-page .col-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 991px) {
    .question-bank-page .col-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.questions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Question Bank Modal - Text Entry Question Styling */
#questionBankModal .question-card .qb-question-text-input .text-input-placeholder .fake-textarea,
#questionBankModal .question-card .qb-question-text-input textarea.fake-textarea,
#questionBankModal .question-card textarea.fake-textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

#questionBankModal .question-card .qb-question-text-input .text-input-placeholder,
#questionBankModal .question-card .qb-question-text-input {
    width: 100% !important;
    margin-bottom: 16px !important;
}

#questionBankModal .question-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 300px !important;
}

#questionBankModal .question-card .question-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

#questionBankModal .question-card .question-details {
    flex: 1 !important;
}

#questionBankModal .question-card .question-footer {
    margin-top: auto !important;
    padding-top: 16px !important;
    flex-shrink: 0 !important;
}

/* Ensure Use Question button is properly styled and positioned */
#questionBankModal .question-card .question-footer .use-question-btn,
#questionBankModal .question-card .use-question-btn {
    width: 100% !important;
    margin-top: auto !important;
}

/* Additional aggressive styling for text entry questions */
#questionBankModal .question-card[data-question-id] .qb-question-text-input .fake-textarea {
    width: 100% !important;
    flex: 1 !important;
    resize: none !important;
    display: block !important;
}

#questionBankModal .question-card[data-question-id] .qb-question-text-input {
    width: 100% !important;
    display: block !important;
}

#questionBankModal .question-card[data-question-id] .text-input-placeholder {
    width: 100% !important;
    display: block !important;
}

/* Override global textarea styles specifically for question bank modal */
#questionBankModal .question-card .qb-question-text-input textarea.fake-textarea,
#questionBankModal .question-card .text-input-placeholder textarea.fake-textarea,
#questionBankModal .question-card textarea.fake-textarea,
#questionBankModal textarea.fake-textarea {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    flex: 1 !important;
}

/* Maximum specificity override for question bank modal textareas */
body #questionBankModal#questionBankModal .question-card.question-card .qb-question-text-input.qb-question-text-input textarea.fake-textarea.fake-textarea,
body #questionBankModal#questionBankModal .question-card.question-card textarea.fake-textarea.fake-textarea {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Simple direct selector for fake-textarea */
.fake-textarea {
    width: 100% !important;
}

/* Cache busting comment - 2024-12-15-v3 */
/* Universal textarea width override for question bank */
#questionBankModal textarea,
textarea.fake-textarea,
.qb-question-text-input textarea,
.text-input-placeholder textarea {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Override .upload-form-group textarea specifically for question bank modal */
#questionBankModal .question-card textarea,
#questionBankModal textarea.fake-textarea,
.question-bank-modal textarea,
div.question-bank-modal textarea.fake-textarea {
    width: 100% !important;
}

/* ============================================
   Section Subsection Component Styles
   ============================================ */

.section-subsection {
    background: var(--pc-bg-card, #0e0f11);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.section-subsection:hover {
    border-color: rgba(109, 217, 197, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Card Headers */
.section-subsection header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-subsection h2 {
    color: #ffffff !important;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    margin: 0 0 8px 0;
}

.section-subsection header p {
    color: rgba(255, 255, 255, 0.6) !important;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    margin: 0;
    line-height: 1.5;
}

.button.ghost {
    background: transparent;
    color: #ffffff !important;
    border: 2px solid #FFF !important;
    border-radius: 10px;
    padding: 12px 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 0px !important;
    padding-right: 10px !important;
    padding-bottom: 0px !important;
    padding-left: 10px !important;
}

/* Primary Button - Match profile page save button styling */
.button.primary {
    background: rgba(109, 217, 197, 0.25);
    border: none;
    border-bottom: 4px solid var(--pc-green-1, #6dd9c5);
    border-radius: 10px;
    height: 50px;
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--pc-grey-4, #f5f5f5);
    text-transform: uppercase;
    padding: 0 24px;
    letter-spacing: 0.5px;
}

.align-right {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.align-baseline {
    display: flex;
    gap: 1rem;
    align-items: baseline;
}

.link-with-copy {
    color: white;
}