/**
 * ProofPoints Campaigns & Questions Table Styling
 * ANTI-INTERFERENCE VERSION - Heavily namespaced to prevent CSS conflicts
 * All styles scoped under #settings-modal to work with modal isolation
 */

/* ============================================
   IMPORTANT: All selectors start with #settings-modal
   to avoid interference from other CSS
   ============================================ */

/* ============================================
   SUB-TAB NAVIGATION
   ============================================ */
#settings-modal .pp-campaign-subtabs {
    display: flex !important;
    gap: 0 !important;
    border-bottom: 2px solid #e0e0e0 !important;
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

/* Campaign URL Input - Take up most space */
.pp-campaign-url-input {
    flex: 1 1 auto !important;  /* Grow to fill space */
    font-size: 11px !important;
    color: #666 !important;
    background: #f9fafb !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-family: monospace !important;
    min-width: 200px !important;  /* Minimum width */
    max-width: none !important;  /* No max width */
}

.pp-campaign-url-input:focus {
    outline: none !important;
    border-color: #81b000 !important;
    background: white !important;
}

/* Copy Button - Small and compact */
.pp-copy-campaign-url {
    display: none !important; /* HIDDEN - pagination now in modal footer */  /* Don't grow, don't shrink */
    width: 70px !important;  /* Fixed small width */
    padding: 6px 10px !important;
    background: #81b000 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    font-family: 'Lexend Deca', sans-serif !important;
    transition: all 0.2s !important;
    text-align: center !important;
}

.pp-copy-campaign-url:hover {
    background: #7B1FA2 !important;
    transform: scale(1.05) !important;
}

.pp-copy-campaign-url:active {
    transform: scale(0.95) !important;
}

/* Success state - green */
.pp-copy-campaign-url.copied {
    background: #81b000 !important;
    transform: scale(1.05) !important;
}

/* Error state - red */
.pp-copy-campaign-url.error {
    background: #d32f2f !important;
}

/* Campaign Editor Modal Z-Index Fix */
.pp-campaign-editor-overlay {
    z-index: 999999 !important;
}

.pp-campaign-editor-modal {
    z-index: 1000000 !important;
}

/* Settings modal lower z-index */
#settings-modal {
    z-index: 10000 !important;
}

/* Container styling */
.pp-campaign-name-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Campaign name cell - ID and name inline */
.pp-campaign-name-cell {
    display: flex !important;
    
    gap: 10px !important;
}

.pp-campaign-id {
    display: none !important; /* HIDDEN - pagination now in modal footer */
    font-size: 11px !important;
    color: #999 !important;
    font-family: monospace !important;
    background: #f5f5f5 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
}

.pp-campaign-name-text {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #1e2835 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

/* URL column - right justified */
.pp-campaign-url-cell {
    text-align: right !important;
}

/* Share and Edit columns - narrow, centered */
.pp-share-col,
.pp-edit-col {
    width: 80px !important;
    text-align: center !important;
    padding: 8px !important;
}

.pp-share-cell,
.pp-edit-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

.pp-share-cell .pp-action-btn,
.pp-edit-cell .pp-action-btn {
    margin: 0 !important;
    width: 70px !important;
}

.pp-campaign-url-wrapper {
    display: inline-flex !important;
    
    gap: 6px !important;
    justify-content: flex-end !important;
}

.pp-campaign-url-field {
    width: 220px !important;
    font-size: 10px !important;
    color: #666 !important;
    background: #f9fafb !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    font-family: monospace !important;
    text-align: left !important;
}

.pp-campaign-url-field:focus {
    outline: none !important;
    border-color: #81b000 !important;
    background: white !important;
}

.pp-copy-url-btn {
    display: none !important; /* HIDDEN - pagination now in modal footer */
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: #81b000 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    
    justify-content: center !important;
    transition: all 0.2s !important;
}

.pp-copy-url-btn:hover {
    background: #7B1FA2 !important;
}

.pp-no-url {
    color: #ccc !important;
    font-size: 12px !important;
}

/* URL column header */
.pp-url-col {
    text-align: right !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #666 !important;
}

.pp-campaign-url-row {
    display: flex !important;
    
    gap: 8px !important;
    width: 100% !important;
}

#settings-modal .pp-subtab {
    all: revert !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 4px solid transparent !important;
    color: #666 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-bottom: -2px !important;
    line-height: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#settings-modal .pp-subtab:hover {
    color: #333 !important;
    background: transparent !important;
}

/* Campaigns subtab - PINK */
#settings-modal .pp-subtab[data-subtab="campaigns"].active {
    color: #9C27B0 !important;
    border-bottom-color: #9C27B0 !important;
    background: transparent !important;
}

/* Questions subtab - GREEN */
#settings-modal .pp-subtab[data-subtab="questions"].active {
    color: #81b000 !important;
    border-bottom-color: #81b000 !important;
    background: transparent !important;
}

#settings-modal .pp-subtab-content {
    display: none !important;
    padding: 24px 0 !important;
}

#settings-modal .pp-subtab-content.active {
    display: block !important;
}

/* ============================================
   TOP CONTROLS (Search centered, Create right)
   ============================================ */
#settings-modal .pp-table-top-controls {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* Reordered layout: search center, create right */
#settings-modal .pp-table-top-controls.pp-controls-reordered {
    justify-content: center !important;
    position: relative !important;
}

#settings-modal .pp-create-section {
    display: flex !important;
    gap: 10px !important;
}

/* Create section on the right */
#settings-modal .pp-create-section.pp-create-right {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
}

#settings-modal .pp-create-input {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    min-width: 180px !important;
    transition: border-color 0.2s !important;
    background: white !important;
    color: #333 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-create-input:focus {
    outline: none !important;
    border-color: #9C27B0 !important;
}

/* Ghost/Skeleton Button Base */
#settings-modal .pp-ghost-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    height: 38px !important;
    background: white !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
}

/* Ghost Button - Green variant (Questions) */
#settings-modal .pp-ghost-btn.pp-ghost-green:hover {
    background: #C0E600 !important;
    border-color: #C0E600 !important;
    color: #333 !important;
}

/* Ghost Button - Pink variant (Campaigns) */
#settings-modal .pp-ghost-btn.pp-ghost-pink:hover {
    background: #f3e5f5 !important;
    border-color: #9C27B0 !important;
    color: #9C27B0 !important;
}

/* Legacy create button styling (kept for backwards compat) */
#settings-modal .pp-create-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    height: 38px !important;
    background: #81b000 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-create-btn:hover {
    background: #6a9400 !important;
    transform: translateY(-1px) !important;
}

/* Ghost button overrides for campaign/question buttons */
/* These ensure skeleton style with colored hover */

#settings-modal .pp-create-btn:active {
    transform: translateY(0) !important;
}

/* Search section - centered */
#settings-modal .pp-search-section {
    display: flex !important;
    position: relative !important;
}

#settings-modal .pp-search-section.pp-search-centered {
    flex: 0 0 auto !important;
}

/* Search icon */
#settings-modal .pp-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

#settings-modal .pp-search-input {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 14px 0 42px !important;
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    min-width: 280px !important;
    background: #f9fafb !important;
    transition: all 0.2s !important;
    color: #333 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

/* Prominent search styling */
#settings-modal .pp-search-input.pp-search-prominent {
    min-width: 320px !important;
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
}

#settings-modal .pp-search-input.pp-search-prominent::placeholder {
    color: #9ca3af !important;
}

#settings-modal .pp-search-input:focus {
    outline: none !important;
    border-color: #81b000 !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(129, 176, 0, 0.1) !important;
}

/* ============================================
   FILTER BAR
   ============================================ */
#settings-modal .pp-filter-bar {
    display: flex !important;
    gap: 10px !important;
    
    margin-bottom: 16px !important;
    
    
    border-radius: 6px !important;
}

#settings-modal .pp-filter-select {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    padding: 0 30px 0 12px !important;
    height: 32px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: white !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M2 4l4 4 4-4" fill="none" stroke="%23666" stroke-width="1.5"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    color: #333 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-filter-select:focus {
    outline: none !important;
    border-color: #81b000 !important;
}

/* Questions tab filters - use green instead of pink */
#settings-modal #pp-filter-type:focus,
#settings-modal #pp-filter-category:focus,
#settings-modal #pp-filter-required:focus {
    border-color: #81b000 !important;
}

#settings-modal #pp-filter-type:hover,
#settings-modal #pp-filter-category:hover,
#settings-modal #pp-filter-required:hover {
    border-color: #81b000 !important;
}

#settings-modal .pp-clear-filters-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    padding: 0 14px !important;
    height: 32px !important;
    background: white !important;
    color: #666 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-left: auto !important;
    line-height: 30px !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-clear-filters-btn:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* ============================================
   STATS BAR
   ============================================ */
#settings-modal .pp-stats-bar {
    display: none !important; /* Hidden to save space */
}

/* ============================================
   TABLE STYLING
   ============================================ */
#settings-modal .pp-table-container {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
    background: white !important;
}

#settings-modal .pp-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Lexend Deca', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
}

#settings-modal .pp-table thead {
    
    border-bottom: 2px solid #e0e0e0 !important;
}

#settings-modal .pp-table th {
    all: revert !important;
    text-align: left !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #555 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border: none !important;
    
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-table th.pp-sortable {
    cursor: pointer !important;
    user-select: none !important;
    position: relative !important;
    padding-right: 28px !important;
    transition: background 0.2s !important;
}

#settings-modal .pp-table th.pp-sortable:hover {
    background: #f0f0f0 !important;
}

#settings-modal .pp-sort-icon {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #ccc !important;
    font-size: 14px !important;
    transition: color 0.2s !important;
    font-style: normal !important;
}

#settings-modal .pp-table th.pp-sortable:hover .pp-sort-icon {
    color: #999 !important;
}

#settings-modal .pp-table th.sorted-asc .pp-sort-icon::before {
    content: '↑' !important;
    color: #81b000 !important;
}

#settings-modal .pp-table th.sorted-desc .pp-sort-icon::before {
    content: '↓' !important;
    color: #81b000 !important;
}

#settings-modal .pp-table th.pp-actions-col {
    text-align: center !important;
    width: 120px !important;
}

/* Campaigns table column widths */
#campaigns-table th[data-sort="status"],
#campaigns-table td:nth-child(2) {
    width: 80px !important;
    text-align: center !important;
}

#campaigns-table th[data-sort="questions"],
#campaigns-table td:nth-child(3),
#campaigns-table th[data-sort="responses"],
#campaigns-table td:nth-child(4) {
    width: 80px !important;
    text-align: center !important;
}

/* Share column (column 6) */
#campaigns-table .pp-share-col,
#campaigns-table th:nth-child(6),
#campaigns-table td:nth-child(6) {
    width: 120px !important;
    text-align: center !important;
}

/* Edit column (column 7) */
#campaigns-table .pp-edit-col,
#campaigns-table th:nth-child(7),
#campaigns-table td:nth-child(7) {
    width: 120px !important;
    text-align: center !important;
}

#settings-modal .pp-table tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.15s !important;
    height: auto !important;
    min-height: 36px !important;
}

#settings-modal .pp-table tbody tr:hover {
    background: #fafafa !important;
}

/* Clickable table rows - cursor pointer on non-action cells */
#settings-modal #campaigns-tbody tr,
#settings-modal #pp-questions-tbody tr {
    cursor: pointer !important;
}

#settings-modal #campaigns-tbody tr:hover,
#settings-modal #pp-questions-tbody tr:hover {
    background: #f5f5f5 !important;
}

/* Action cells should have default cursor */
#settings-modal #campaigns-tbody tr td.pp-share-cell,
#settings-modal #campaigns-tbody tr td.pp-edit-cell,
#settings-modal #pp-questions-tbody tr td.pp-actions-cell {
    cursor: default !important;
}

#settings-modal .pp-table tbody tr:last-child {
    border-bottom: 1px solid #e0e0e0 !important;
}

#settings-modal .pp-table td {
    all: revert !important;
    padding: 12px 12px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #333 !important;
    vertical-align: middle !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border: none !important;
    background: transparent !important;
    line-height: 1.2 !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-table td.pp-actions-cell {
    text-align: center !important;
    padding-right: 16px !important;
}

/* ============================================
   TABLE BADGES & INDICATORS - MINIMAL STYLE
   ============================================ */

/* New minimal indicators (dot + text) */
#settings-modal .pp-minimal-indicator {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #374151 !important;
}

#settings-modal .pp-indicator-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

/* Status colors */
#settings-modal .pp-minimal-indicator.active .pp-indicator-dot {
    background: #22c55e !important;
}

#settings-modal .pp-minimal-indicator.draft .pp-indicator-dot {
    background: #f59e0b !important;
}

/* Required colors */
#settings-modal .pp-minimal-indicator.required .pp-indicator-dot {
    background: #ef4444 !important;
}

#settings-modal .pp-minimal-indicator.optional .pp-indicator-dot {
    background: #9ca3af !important;
}

/* Source colors */
#settings-modal .pp-minimal-indicator.universal .pp-indicator-dot {
    background: #3b82f6 !important;
}

#settings-modal .pp-minimal-indicator.custom .pp-indicator-dot {
    background: #8b5cf6 !important;
}

/* Legacy badges - kept for backwards compatibility */
#settings-modal .pp-status-badge {
    display: none !important;
}

#settings-modal .pp-required-badge {
    display: none !important;
}

#settings-modal .pp-source-badge {
    display: none !important;
}

#settings-modal .pp-question-count,
#settings-modal .pp-uses-count {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #374151 !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
#settings-modal .pp-action-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 4px 20px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: white !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin: 0 2px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-action-btn:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
    border-color: #ccc !important;
    transform: translateY(-1px) !important;
}

#settings-modal .pp-action-btn.edit {
    background: #81b000 !important;
    color: white !important;
    border: 1px solid #81b000 !important;
}

#settings-modal .pp-action-btn.edit:hover {
    background: #6a9400 !important;
    color: white !important;
    border-color: #6a9400 !important;
    transform: translateY(-1px) !important;
}

#settings-modal .pp-action-btn.delete {
    color: #d32f2f !important;
    border-color: #d32f2f !important;
}

#settings-modal .pp-action-btn.delete:hover {
    background: #ffebee !important;
    border-color: #c62828 !important;
}

#settings-modal .pp-action-btn.view {
    color: #388E3C !important;
    border-color: #388E3C !important;
}

#settings-modal .pp-action-btn.view:hover {
    background: #e8f5e9 !important;
    border-color: #2e7d32 !important;
}

/* ============================================
   THREE-DOTS MORE MENU
   ============================================ */
#settings-modal .pp-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    margin: 0 !important;
}

#settings-modal .pp-more-btn svg {
    width: 20px !important;
    height: 20px !important;
    fill: #6b7280 !important;
    transition: fill 0.15s ease !important;
}

#settings-modal .pp-more-btn:hover {
    background: #f0fdf4 !important;
}

#settings-modal .pp-more-btn:hover svg {
    fill: #81b000 !important;
}

/* Actions cell with three-dots */
#settings-modal .pp-edit-cell,
#settings-modal .pp-actions-cell {
    text-align: center !important;
    width: 60px !important;
}

/* ============================================
   TABLE FOOTER & PAGINATION
   ============================================ */
#settings-modal .pp-table-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    margin-top: -1px !important;
}

#settings-modal .pp-showing-text {
    font-size: 12px !important;
    color: #666 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    line-height: normal !important;
}

#settings-modal .pp-showing-text strong {
    color: #333 !important;
    font-weight: 600 !important;
}

#settings-modal .pp-pagination {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}

#settings-modal .pp-page-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    width: 32px !important;
    height: 32px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: white !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: normal !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-page-btn:hover:not(:disabled) {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
}

#settings-modal .pp-page-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

#settings-modal .pp-page-numbers {
    display: flex !important;
    gap: 4px !important;
    margin: 0 4px !important;
}

#settings-modal .pp-page-num {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: white !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    
    justify-content: center !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

#settings-modal .pp-page-num:hover {
    background: #f5f5f5 !important;
    border-color: #ccc !important;
}

/* Default pagination - will be overridden by specific tabs */
#settings-modal .pp-page-num.active {
    background: #e0e0e0 !important;
    color: #333 !important;
    border-color: #ccc !important;
    font-weight: 600 !important;
}

/* Campaigns pagination - PINK */
#settings-modal #campaigns-pagination-footer .pp-page-num.active,
#settings-modal #campaigns-footer .pp-page-num.active {
    background: #f3e5f5 !important;
    border-color: #9C27B0 !important;
    color: #9C27B0 !important;
}

/* Questions tab pagination - GREEN */
#settings-modal #questions-pagination-footer .pp-page-num.active,
#settings-modal #questions-footer .pp-page-num.active,
#settings-modal #questions-footer .pp-page-btn.active {
    background: #C0E600 !important;
    border-color: #C0E600 !important;
    color: #333 !important;
}

#settings-modal .pp-page-ellipsis {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    
    justify-content: center !important;
    color: #999 !important;
    font-size: 13px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    line-height: normal !important;
}

#settings-modal .pp-per-page-section {
    display: flex !important;
    
    gap: 8px !important;
}

#settings-modal .pp-per-page-section label {
    font-size: 12px !important;
    color: #666 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    line-height: normal !important;
    font-weight: normal !important;
}

#settings-modal .pp-per-page-select {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 12px !important;
    padding: 4px 24px 4px 8px !important;
    height: 28px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    background: white !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M1 3l4 4 4-4" fill="none" stroke="%23666" stroke-width="1.5"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    color: #333 !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

/* ============================================
   EMPTY STATE
   ============================================ */
#settings-modal .pp-empty-state {
    text-align: center !important;
    padding: 60px 20px !important;
    color: #999 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

#settings-modal .pp-empty-icon {
    font-size: 48px !important;
    margin-bottom: 16px !important;
    opacity: 0.5 !important;
    line-height: normal !important;
}

#settings-modal .pp-empty-state h4 {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #666 !important;
    margin: 0 0 8px 0 !important;
    line-height: normal !important;
}

#settings-modal .pp-empty-state p {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    color: #999 !important;
    margin: 0 !important;
    line-height: normal !important;
}

/* ============================================
   LOADING STATE
   ============================================ */
#settings-modal .pp-loading-row td {
    color: #999 !important;
    font-style: italic !important;
}

/* ============================================
   DATE FORMATTING
   ============================================ */
#settings-modal .pp-date {
    font-size: 11px !important;
    color: #666 !important;
    white-space: nowrap !important;
    font-family: 'Lexend Deca', sans-serif !important;
    line-height: normal !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 1200px) {
    #settings-modal .pp-table-top-controls {
        flex-wrap: wrap !important;
    }
    
    #settings-modal .pp-create-section {
        flex: 1 !important;
        min-width: 100% !important;
    }
    
    #settings-modal .pp-search-section {
        flex: 1 !important;
    }
}

@media (max-width: 768px) {
    #settings-modal .pp-table th,
    #settings-modal .pp-table td {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    
    #settings-modal .pp-stats-bar {
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    
    #settings-modal .pp-filter-bar {
        flex-wrap: wrap !important;
    }
    
    #settings-modal .pp-table-footer {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    
    #settings-modal .pp-pagination {
        justify-content: center !important;
    }
    
    #settings-modal .pp-per-page-section {
        justify-content: center !important;
    }
}

/* ============================================
   QUESTION MODAL STYLES
   ============================================ */

.pp-question-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    z-index: 9999999 !important;
    animation: fadeIn 0.2s !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.pp-question-modal {
    background: white !important;
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
    animation: fadeIn 0.2s !important;
    font-family: 'Lexend Deca', sans-serif !important;
    position: relative !important;
    z-index: 100002 !important;
    overflow: hidden !important;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pp-modal-header {
    padding: 14px 24px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: white !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

.pp-modal-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1e2835 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

.pp-btn-close {
    background: transparent !important;
    border: none !important;
    color: #999 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-btn-close:hover {
    color: #333 !important;
    background: #f5f5f5 !important;
    border-radius: 4px !important;
}

.pp-modal-body {
    padding: 16px 24px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
}

/* ============================================
   COLLAPSIBLE SECTIONS
   ============================================ */

.pp-collapsible-section {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    background: #fafafa !important;
    overflow: hidden !important;
}

.pp-collapsible-header {
    display: flex !important;
    
    
    
    background: #f3f4f6 !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.15s ease !important;
}

.pp-collapsible-header:hover {
    background: #e5e7eb !important;
}

.pp-collapsible-title {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

.pp-collapsible-toggle {
    display: flex !important;
    
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: #6b7280 !important;
    transition: transform 0.2s ease !important;
}

.pp-collapsible-section.collapsed .pp-collapsible-toggle {
    transform: rotate(-90deg) !important;
}

.pp-collapsible-body {
    padding: 16px !important;
    background: white !important;
    transition: max-height 0.3s ease, padding 0.2s ease, opacity 0.2s ease !important;
    overflow: hidden !important;
}

.pp-collapsible-section.collapsed .pp-collapsible-body {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
}

.pp-collapsible-section.expanded .pp-collapsible-body {
    max-height: 2000px !important;
    opacity: 1 !important;
}

/* 3-column equal-width layout on desktop for question modal */
@media (min-width: 1024px) {
    /* Main form becomes a three-column layout */
    .pp-question-modal #pp-question-form {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 24px !important;
        align-items: start !important;
        height: 100% !important;
    }
    
    /* Question Settings section takes left column */
    .pp-question-modal #pp-question-form .pp-collapsible-section {
        grid-column: 1 !important;
        grid-row: 1 !important;
        margin-bottom: 0 !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    /* Hide the collapsible header on desktop - not needed in 3-col layout */
    .pp-question-modal .pp-collapsible-header {
        display: none !important;
    }
    
    /* Collapsible body always visible, no collapse behavior on desktop */
    .pp-question-modal .pp-collapsible-body {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        max-height: none !important;
        opacity: 1 !important;
        padding: 16px !important;
    }
    
    /* Dynamic fields (Answer Choices) take middle column */
    .pp-question-modal #pp-question-form > #pp-dynamic-fields {
        grid-column: 2 !important;
        grid-row: 1 !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        padding: 8px 0 !important;
    }
    
    /* Video Prompt section takes right column */
    .pp-question-modal #pp-question-form #pp-video-prompt-container,
    .pp-question-modal #pp-question-form .pp-video-prompt-section {
        grid-column: 3 !important;
        grid-row: 1 !important;
        position: sticky !important;
        top: 0 !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    /* Answer Choices container - single column stack */
    #pp-choices-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    /* Each choice row - label and value side by side with delete button */
    .pp-choice-row {
        grid-template-columns: 1fr 1fr 32px !important;
        gap: 8px !important;
    }
    
    .pp-choice-row input {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    
    .pp-choice-row .pp-remove-choice {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
    
    /* Add Choice button */
    .pp-add-choice {
        margin-top: 8px !important;
    }
}

/* Extra wide screens - slightly more padding */
@media (min-width: 1400px) {
    .pp-question-modal #pp-question-form {
        gap: 32px !important;
    }
}

/* Mark certain fields as full-width */
.pp-form-group.pp-form-group-full-width {
    /* This class will be added to textarea fields and other full-width items */
}

.pp-modal-footer {
    padding: 12px 24px !important;
    
    display: flex !important;
    
    
    gap: 10px !important;
    background: #f9fafb !important;
    border-radius: 0 0 12px 12px !important;
    flex-shrink: 0 !important;
}

.pp-form-group {
    margin-bottom: 12px !important;
}

.pp-form-group label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e2835 !important;
    margin-bottom: 4px !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

.pp-form-group input[type="text"],
.pp-form-group input[type="number"],
.pp-form-group input[type="email"],
.pp-form-group select,
.pp-form-group textarea {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    box-sizing: border-box !important;
}

.pp-form-group input:focus,
.pp-form-group select:focus,
.pp-form-group textarea:focus {
    outline: none !important;
    border-color: #81b000 !important;
    box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1) !important;
}

.pp-form-group textarea {
    resize: vertical !important;
    min-height: 60px !important;
}

.pp-form-checkbox {
    display: flex !important;
    
}

.pp-form-checkbox label {
    display: flex !important;
    
    gap: 8px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
}

.pp-form-checkbox input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.pp-field-description {
    margin: 6px 0 0 0 !important;
    font-size: 12px !important;
    color: #666 !important;
}

.pp-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

#pp-choices-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.pp-choice-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    gap: 8px !important;
    
}

.pp-choice-row input {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

.pp-choice-row .pp-remove-choice {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #d32f2f !important;
    transition: all 0.2s !important;
}

.pp-choice-row .pp-remove-choice:hover {
    background: #ffebee !important;
    border-color: #d32f2f !important;
}

.pp-btn-secondary,
.pp-cancel-question-btn {
    background: #f5f5f5 !important;
    color: #666 !important;
    border: 1px solid #e0e0e0 !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-btn-secondary:hover,
.pp-cancel-question-btn:hover {
    background: #eeeeee !important;
    color: #333 !important;
    border-color: #d0d0d0 !important;
    transform: translateY(-1px) !important;
}

.pp-btn-primary {
    background: #81b000 !important;
    color: white !important;
    border: none !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-btn-primary:hover {
    background: #6a9400 !important;
    transform: translateY(-1px) !important;
}

.pp-btn-primary.saving {
    background: #5c8400 !important;
    cursor: wait !important;
}

.pp-btn-primary:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.pp-btn-danger,
.pp-delete-question-modal-btn {
    background: transparent !important;
    color: #d32f2f !important;
    border: 1px solid #d32f2f !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-btn-danger:hover,
.pp-delete-question-modal-btn:hover {
    background: #ffebee !important;
    border-color: #c62828 !important;
    color: #c62828 !important;
    transform: translateY(-1px) !important;
}

.pp-modal-footer .pp-btn-danger,
.pp-modal-footer .pp-delete-question-modal-btn {
    margin-right: auto !important;
}

.pp-btn-small {
    padding: 6px 14px !important;
    font-size: 13px !important;
}

.pp-btn-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    line-height: 1 !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    
    justify-content: center !important;
}

@media (max-width: 768px) {
    .pp-question-modal-overlay {
        padding: 8px !important;
    }
    
    .pp-modal-body {
        
    }
    
    .pp-form-row {
        grid-template-columns: 1fr !important;
    }
    
    .pp-choice-row {
        grid-template-columns: 1fr auto !important;
    }
    
    .pp-choice-row .pp-choice-value {
        display: none !important;
    }
}

/* ============================================
   TABS - COMPACT WIDTH (NOT SPANNING WINDOW)
   ============================================ */

#settings-modal .settings-tabs {
    display: flex !important;
    justify-content: flex-start !important; /* LEFT ALIGN */
    gap: 0 !important; /* No gap between tabs */
    border-bottom: 1px solid #e0e0e0 !important;
    margin-bottom: 0 !important;
    background: white !important;
    padding: 0 20px !important; /* Padding on sides only */
}

#settings-modal .settings-tabs .tab-btn {
    background: transparent !important;
    border: none !important;
    border-bottom: 6px solid transparent !important;
    margin-bottom: -1px !important;
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 20px 8px 20px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-family: 'Lexend Deca', sans-serif !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
}

#settings-modal .settings-tabs .tab-btn:hover {
    color: #333 !important;
}

/* Brand Style tab - Teal */
#settings-modal .settings-tabs .tab-btn[data-tab="brand-style-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #80DABC !important;
}

/* Campaigns tab - PINK */
#settings-modal .settings-tabs .tab-btn[data-tab="campaigns-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #9C27B0 !important;
}

/* Questions tab - GREEN */
#settings-modal .settings-tabs .tab-btn[data-tab="questions-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #81b000 !important;
}

/* Workflow tab - Yellow */
#settings-modal .settings-tabs .tab-btn[data-tab="workflow-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #FFCC31 !important;
}

/* Release Form tab - Purple */
#settings-modal .settings-tabs .tab-btn[data-tab="release-form-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #9333ea !important;
}

/* Analytics tab - Blue */
#settings-modal .settings-tabs .tab-btn[data-tab="analytics-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #3498DB !important;
}

/* Story Credits tab - Orange */
#settings-modal .settings-tabs .tab-btn[data-tab="story-credits-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #EB8616 !important;
}

/* ============================================
   CAMPAIGNS TAB - FILTER BAR
   ============================================ */

#settings-modal .pp-filter-bar {
    display: flex !important;
    
    gap: 12px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

#settings-modal .pp-filter-select {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    height: 36px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: white !important;
    color: #333 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s !important;
    min-width: 140px !important;
}

#settings-modal .pp-filter-select:hover {
    border-color: #ccc !important;
}

#settings-modal .pp-filter-select:focus {
    border-color: #81b000 !important;
    box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1) !important;
}

/* Questions tab filters - use green instead of pink */
#settings-modal #pp-filter-type:focus,
#settings-modal #pp-filter-category:focus,
#settings-modal #pp-filter-required:focus {
    border-color: #81b000 !important;
    box-shadow: 0 0 0 2px rgba(129, 176, 0, 0.1) !important;
}

#settings-modal #pp-filter-type:hover,
#settings-modal #pp-filter-category:hover,
#settings-modal #pp-filter-required:hover {
    border-color: #81b000 !important;
}

#settings-modal .pp-filter-label {
    font-size: 13px !important;
    color: #666 !important;
    font-weight: 500 !important;
    margin-right: 4px !important;
}

#settings-modal .pp-filter-clear-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    height: 36px !important;
    background: transparent !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    color: #666 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    margin-left: auto !important; /* Push to right */
}

#settings-modal .pp-filter-clear-btn:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
}

/* ============================================
   TOP CONTROLS (Create + Search) - FOR CAMPAIGNS
   ============================================ */

#settings-modal .pp-table-top-controls {
    display: flex !important;
    
    
    gap: 20px !important;
    margin-bottom: 20px !important;
}

#settings-modal .pp-create-section {
    display: flex !important;
    gap: 10px !important;
    
}

#settings-modal .pp-create-input {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    height: 38px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    outline: none !important;
    transition: all 0.2s !important;
    width: 280px !important;
}

#settings-modal .pp-create-input:focus {
    border-color: #81b000 !important;
    box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1) !important;
}

#settings-modal .pp-create-btn {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    height: 38px !important;
    background: #81b000 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
}

#settings-modal .pp-create-btn:hover {
    background: #7B1FA2 !important;
}

#settings-modal .pp-search-section {
    display: flex !important;
    
}

#settings-modal .pp-search-input {
    all: revert !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    height: 38px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    outline: none !important;
    transition: all 0.2s !important;
    width: 280px !important;
}

#settings-modal .pp-search-input:focus {
    border-color: #81b000 !important;
    box-shadow: 0 0 0 2px rgba(156, 39, 176, 0.1) !important;
}

/* ============================================
   STICKY PAGINATION - THE NUCLEAR OPTION
   ============================================ */

/* Force modal body to be flex container */
#settings-modal .settings-modal-body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    height: calc(100vh - 120px) !important;
}

/* All tab content must be flex when shown */
#settings-modal .tab-content {
    display: none !important;
    flex: 1 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* Override inline display: block with flex */
#settings-modal #brand-style-tab[style*="block"],
#settings-modal #campaigns-tab[style*="block"],
#settings-modal #questions-tab[style*="block"],
#settings-modal #analytics-tab[style*="block"],
#settings-modal #story-credits-tab[style*="block"] {
    display: flex !important;
}

/* Campaigns and Questions need special layout */
#settings-modal #campaigns-tab,
#settings-modal #questions-tab {
    padding: 20px 30px 20px 30px !important;
}

/* Brand Style needs its own layout */
#settings-modal #brand-style-tab {
    padding: 30px !important;
    overflow-y: auto !important;
}

/* Analytics and Credits scroll normally */
#settings-modal #analytics-tab,
#settings-modal #story-credits-tab {
    padding: 30px !important;
    overflow-y: auto !important;
}

/* Top controls stay at top */
#settings-modal .pp-table-top-controls {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}

#settings-modal .pp-filter-bar {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}

/* THE KEY: Table wrapper contains EVERYTHING */
#settings-modal .pp-table-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: white !important;
}

/* Table container is scrollable */
#settings-modal .pp-table-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    border: none !important;
}

/* Pagination stays at bottom - HIDDEN: now in modal footer */
#settings-modal #campaigns-pagination-footer,
#settings-modal #questions-pagination-footer {
    display: none !important;
}

/* Modal footer fixed at bottom */
#settings-modal .settings-modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 16px 40px !important;
}

/* ============================================
   HIDE FEEDBACK WIDGET
   ============================================ */

#feedbackify-html-form,
.feedbackify-feedback-btn,
[class*="feedbackify"],
[id*="feedbackify"] {
    display: none !important;
    visibility: hidden !important;
}
/**
 * CORRECTED CSS - LEFT-ALIGNED TABS + PURPLE CAMPAIGNS
 * 
 * Changes from previous:
 * 1. Tabs aligned LEFT (not centered)
 * 2. Campaigns tab = PURPLE (#81b000) to match button
 * 3. Font back to 14px (normal size)
 * 4. Sticky pagination kept
 */



/* ============================================
   STICKY PAGINATION - WORKING VERSION
   ============================================ */

/* Force modal body to be flex container */
#settings-modal .settings-modal-body {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    height: calc(100vh - 120px) !important;
}

/* All tab content must be flex when shown */
#settings-modal .tab-content {
    display: none !important;
    flex: 1 !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
}

/* Override inline display: block with flex */
#settings-modal #brand-style-tab[style*="block"],
#settings-modal #campaigns-tab[style*="block"],
#settings-modal #questions-tab[style*="block"],
#settings-modal #analytics-tab[style*="block"],
#settings-modal #story-credits-tab[style*="block"] {
    display: flex !important;
}

/* Campaigns and Questions need special layout */
#settings-modal #campaigns-tab,
#settings-modal #questions-tab {
    padding: 20px 30px 20px 30px !important;
}

/* Brand Style needs its own layout */
#settings-modal #brand-style-tab {
    padding: 30px !important;
    overflow-y: auto !important;
}

/* Analytics and Credits scroll normally */
#settings-modal #analytics-tab,
#settings-modal #story-credits-tab {
    padding: 30px !important;
    overflow-y: auto !important;
}

/* Top controls stay at top */
#settings-modal .pp-table-top-controls {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}

#settings-modal .pp-filter-bar {
    flex-shrink: 0 !important;
    margin-bottom: 16px !important;
}

/* THE KEY: Table wrapper contains EVERYTHING */
#settings-modal .pp-table-wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: white !important;
}

/* Table container is scrollable */
#settings-modal .pp-table-container {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    border: none !important;
}

/* Pagination - HIDDEN: now in modal footer */
#settings-modal #campaigns-pagination-footer,
#settings-modal #questions-pagination-footer {
    display: none !important;
}

/* Modal footer fixed at bottom */
#settings-modal .settings-modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 16px 40px !important;
}

/* ============================================
   HIDE FEEDBACK WIDGET
   ============================================ */

#feedbackify-html-form,
.feedbackify-feedback-btn,
[class*="feedbackify"],
[id*="feedbackify"] {
    display: none !important;
    visibility: hidden !important;
}

/* Make question text larger (first column only) - QUESTIONS TABLE ONLY */
#settings-modal #pp-questions-table td:first-child,
#settings-modal #pp-questions-table td:first-child * {
    font-size: 15px !important; /* Adjust this value as needed */
    font-weight: 400 !important; /* Normal weight for readability */
}

/* Extra specificity to ensure font-weight is applied - QUESTIONS TABLE ONLY */
#settings-modal #pp-questions-table tbody tr td:first-child,
#settings-modal #pp-questions-table tbody tr td:first-child * {
    font-weight: 400 !important;
}

/* Ensure last row has bottom border - questions table */
#settings-modal #questions-table tbody tr:last-child {
    border-bottom: 1px solid #e0e0e0 !important;
}

/**
 * Add this CSS to your question-library.css or campaign-form.css
 */

/* Multi-select error state */
select[multiple].error {
    border-color: #f44336 !important;
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1) !important;
}

.error-message {
    color: #f44336 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

.pp-field-hint {
    font-size: 12px !important;
    color: #666 !important;
    margin-top: 4px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-style: italic !important;
}

/* Improve multi-select appearance */
select[multiple] {
    min-height: 120px !important;
    padding: 8px !important;
}

select[multiple] option {
    padding: 8px !important;
    margin-bottom: 2px !important;
    border-radius: 4px !important;
}

select[multiple] option:checked {
    background: linear-gradient(#81b000, #81b000) !important;
    color: white !important;
}

/**
 * Campaign Modal Improvements CSS
 * 
 * Fixes for:
 * 1. "No questions yet" text - make smaller and elegant
 * 2. Question tiles height - make more compact
 * 3. Search function styling
 * 4. Save/Delete/Status buttons in modal footer
 */

/* ============================================
   CAMPAIGN EDITOR MODAL - "NO QUESTIONS" TEXT
   ============================================ */

.pp-campaign-editor-overlay #campaign-questions-list p,
.pp-campaign-editor-overlay #available-questions-list p {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #999 !important;
    text-align: center !important;
    padding: 30px 20px !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* ============================================
   CAMPAIGN EDITOR MODAL - QUESTION TILES
   ============================================ */

/* Available Questions - Compact */
.pp-available-question {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;  /* Reduced from 10px 12px */
    display: flex !important;
    
    
    gap: 10px !important;
    margin-bottom: 6px !important;
    transition: all 0.2s !important;
}

.pp-available-question:hover {
    border-color: #81b000 !important;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.1) !important;
}

.pp-available-question > div:first-child {
    flex: 1 !important;
    min-width: 0 !important;
}

.pp-available-question .pp-question-title {
    font-size: 13px !important;
    font-weight: 400 !important;  /* Reduced from 600 */
    color: #1e2835 !important;
    margin-bottom: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

.pp-available-question .pp-question-meta {
    font-size: 10px !important;
    color: #666 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

/* Campaign Questions - Compact */
.pp-campaign-question {
    background: white !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;  /* Reduced from 10px 12px */
    display: flex !important;
    
    
    gap: 10px !important;
    margin-bottom: 6px !important;
    cursor: move !important;
    transition: all 0.2s !important;
}

.pp-campaign-question:hover {
    border-color: #81b000 !important;
    box-shadow: 0 2px 4px rgba(156, 39, 176, 0.1) !important;
}

.pp-campaign-question.dragging {
    opacity: 0.5 !important;
}

/* ============================================
   SEARCH FUNCTION IN CAMPAIGN MODAL
   ============================================ */

.pp-campaign-editor-search {
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s !important;
}

.pp-campaign-editor-search:focus {
    outline: none !important;
    border-color: #81b000 !important;
    box-shadow: 0 0 0 3px rgba(156, 39, 176, 0.1) !important;
}

.pp-campaign-editor-search::placeholder {
    color: #999 !important;
}

/* ============================================
   CAMPAIGN EDITOR MODAL - FOOTER BUTTONS
   ============================================ */

.pp-editor-footer {
    background: white !important;
    
    display: flex !important;
    
    
    padding: 16px 20px !important;
}

.pp-editor-footer-left {
    display: flex !important;
    
    gap: 12px !important;
}

.pp-editor-footer-right {
    display: flex !important;
    
    gap: 12px !important;
}

/* Status Indicator */
.pp-campaign-status-indicator {
    display: inline-flex !important;
    
    gap: 8px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
}

.pp-campaign-status-indicator.draft {
    background: #fff3e0 !important;
    color: #ef6c00 !important;
    border: 1px solid #ffb74d !important;
}

.pp-campaign-status-indicator.active {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: 1px solid #81c784 !important;
}

/* Make Active Button - Teal */
.pp-make-live-btn {
    padding: 8px 18px !important;
    background: #0d9488 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-make-live-btn:hover {
    background: #0f766e !important;
    transform: translateY(-1px) !important;
}

.pp-make-live-btn:disabled {
    background: #ccc !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Make Draft Button */
.pp-make-draft-btn {
    padding: 8px 18px !important;
    background: #ff9800 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-make-draft-btn:hover {
    background: #f57c00 !important;
    transform: translateY(-1px) !important;
}

/* Delete Campaign Button */
.pp-delete-campaign-btn {
    padding: 8px 18px !important;
    background: white !important;
    color: #d32f2f !important;
    border: 1px solid #d32f2f !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-delete-campaign-btn:hover {
    background: #ffebee !important;
}

/* Save Changes Button */
.pp-save-campaign-btn {
    padding: 8px 18px !important;
    background: #81b000 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-save-campaign-btn:hover {
    background: #6a9400 !important;
    transform: translateY(-1px) !important;
}

/* Save button saving state */
.pp-save-campaign-btn.saving {
    background: #5c8400 !important;
    cursor: wait !important;
}

/* Close Button - Dark style */
.pp-editor-close {
    padding: 8px 20px !important;
    background: #1f2937 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-editor-close:hover {
    background: #374151 !important;
}

/* Large X close button in header - keep white/light style */
.pp-close-x-btn {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 28px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    color: #666 !important;
    border: 1px solid #e0e0e0 !important;
}

.pp-close-x-btn:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
    border-color: #ccc !important;
}

/* Copy Campaign Button - now in footer, same style as other buttons */
.pp-copy-campaign-btn {
    padding: 8px 16px !important;
    background: white !important;
    color: #1976D2 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.pp-copy-campaign-btn:hover {
    background: #e3f2fd !important;
    border-color: #1976D2 !important;
}

.pp-copy-campaign-btn:disabled {
    background: #e0e0e0 !important;
    color: #999 !important;
    border-color: #e0e0e0 !important;
    cursor: not-allowed !important;
}

/* Vertical borders */
#settings-modal .pp-table td,
#settings-modal .pp-table th {
    border-right: 1px solid #e0e0e0 !important;
}

#settings-modal .pp-table td:last-child,
#settings-modal .pp-table th:last-child {
    border-right: none !important;
}

/* Horizontal borders */
#settings-modal .pp-table thead {
    border-bottom: 1px solid #e0e0e0 !important;
}

#settings-modal .pp-table tbody tr {
    border-bottom: 1px solid #e0e0e0 !important;
}

/* ============================================
   NUCLEAR OPTION - MAXIMUM SPECIFICITY
   Font-weight for question text (first column) - QUESTIONS TABLE ONLY
   Added to override any conflicting rules INCLUDING <b> and <strong> tags
   ============================================ */

/* Multiple selectors with maximum specificity - target td AND all children */
html body #settings-modal.modal #pp-questions-table tbody tr td:first-child,
html body #settings-modal #pp-questions-table tbody tr td:first-child,
html body div#settings-modal #pp-questions-table tbody tr td:first-child,
html body #settings-modal.modal #pp-questions-table td:first-child,
html body #settings-modal #pp-questions-table td:first-child,
html body div#settings-modal #pp-questions-table td:first-child,
html body #settings-modal.modal #pp-questions-table tbody tr td:first-child *,
html body #settings-modal #pp-questions-table tbody tr td:first-child *,
html body div#settings-modal #pp-questions-table tbody tr td:first-child *,
html body #settings-modal.modal #pp-questions-table td:first-child *,
html body #settings-modal #pp-questions-table td:first-child *,
html body div#settings-modal #pp-questions-table td:first-child * {
    font-weight: 400 !important;
    /* Fallback: If Lexend Deca 400 not available, use system fonts that DO support 400 */
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Absolute fallback with normal weight keywords */
html body #settings-modal #pp-questions-table tbody tr td:first-child,
html body #settings-modal #pp-questions-table tbody tr td:first-child * {
    font-weight: normal !important;
}

/* ============================================
   MOBILE TABLE FIXES - Portrait & Landscape
   ============================================ */

@media (max-width: 900px) {
    /* Enable horizontal scrolling on table container */
    #settings-modal .pp-table-container {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure table doesn't collapse */
    #settings-modal .pp-table {
        min-width: 600px !important;
    }
    
    /* Hide less important columns on mobile - Campaigns table */
    #settings-modal #campaigns-table th:nth-child(3),
    #settings-modal #campaigns-table td:nth-child(3),
    #settings-modal #campaigns-table th:nth-child(4),
    #settings-modal #campaigns-table td:nth-child(4),
    #settings-modal #campaigns-table th:nth-child(5),
    #settings-modal #campaigns-table td:nth-child(5) {
        display: none !important;
    }
    
    /* Hide less important columns on mobile - Questions table */
    #settings-modal #pp-questions-table th:nth-child(3),
    #settings-modal #pp-questions-table td:nth-child(3),
    #settings-modal #pp-questions-table th:nth-child(5),
    #settings-modal #pp-questions-table td:nth-child(5),
    #settings-modal #pp-questions-table th:nth-child(6),
    #settings-modal #pp-questions-table td:nth-child(6) {
        display: none !important;
    }
    
    /* Make table more compact */
    #settings-modal .pp-table th,
    #settings-modal .pp-table td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
    
    /* Ensure action buttons stay visible */
    #settings-modal .pp-action-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}

/* Landscape-specific fixes */
@media (max-height: 500px) and (orientation: landscape) {
    /* Ensure settings modal body scrolls */
    #settings-modal .settings-modal-body {
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    /* Tab content needs proper height */
    #settings-modal .tab-content {
        min-height: 200px !important;
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
    }
    
    /* Table wrapper should fill available space */
    #settings-modal .pp-table-wrapper {
        max-height: calc(100vh - 280px) !important;
        overflow: auto !important;
    }
    
    /* Reduce top controls padding */
    #settings-modal .pp-table-top-controls {
        padding: 8px 0 !important;
        gap: 8px !important;
    }
    
    /* Compact filter bar */
    #settings-modal .pp-filter-bar {
        gap: 6px !important;
    }
    
    /* Smaller inputs */
    #settings-modal .pp-search-input,
    #settings-modal .pp-filter-select {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
}

/* Very small screens - even more compact */
@media (max-width: 480px) {
    /* Stack create campaign controls */
    #settings-modal .pp-create-campaign-form {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    #settings-modal .pp-create-campaign-form input {
        width: 100% !important;
    }
    
    /* Stack filter controls */
    #settings-modal .pp-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    /* Smaller campaign name column */
    #settings-modal .pp-table td:first-child {
        max-width: 140px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Ensure Edit button is always visible */
    #settings-modal .pp-edit-cell,
    #settings-modal .pp-share-cell,
    #settings-modal .pp-actions-cell {
        position: sticky !important;
        right: 0 !important;
        background: white !important;
        z-index: 1 !important;
    }
}

/* ============================================
   FINAL OVERRIDES - RAMS STYLE LAYOUT
   These MUST be at the end to override all above
   ============================================ */

/* Reordered layout: search center, create right */
#settings-modal .pp-table-top-controls.pp-controls-reordered {
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

/* Create section positioned on the right */
#settings-modal .pp-controls-reordered .pp-create-section.pp-create-right {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    display: flex !important;
    gap: 10px !important;
}

/* Search section stays centered */
#settings-modal .pp-controls-reordered .pp-search-section.pp-search-centered {
    flex: 0 0 auto !important;
    display: flex !important;
    position: relative !important;
}

/* Search icon positioning */
#settings-modal .pp-search-icon {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Prominent search input */
#settings-modal .pp-search-input.pp-search-prominent {
    min-width: 320px !important;
    padding: 0 14px 0 42px !important;
    height: 38px !important;
    background: #f9fafb !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    color: #333 !important;
    transition: all 0.2s !important;
}

#settings-modal .pp-search-input.pp-search-prominent::placeholder {
    color: #9ca3af !important;
}

#settings-modal .pp-search-input.pp-search-prominent:focus {
    outline: none !important;
    border-color: #81b000 !important;
    background: white !important;
    box-shadow: 0 0 0 3px rgba(129, 176, 0, 0.1) !important;
}

/* Ghost/Skeleton Button - Base */
#settings-modal .pp-ghost-btn {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    height: 38px !important;
    background: white !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    line-height: 36px !important;
    box-sizing: border-box !important;
}

/* Ghost Button - Green variant (Questions) */
#settings-modal .pp-ghost-btn.pp-ghost-green:hover {
    background: #C0E600 !important;
    border-color: #C0E600 !important;
    color: #333 !important;
}

/* Ghost Button - Pink variant (Campaigns) */
#settings-modal .pp-ghost-btn.pp-ghost-pink:hover {
    background: #f3e5f5 !important;
    border-color: #9C27B0 !important;
    color: #9C27B0 !important;
}

/* Campaign name input */
#settings-modal .pp-controls-reordered .pp-create-input {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    padding: 0 14px !important;
    height: 38px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    min-width: 180px !important;
    background: white !important;
    color: #333 !important;
    transition: border-color 0.2s !important;
}

#settings-modal .pp-controls-reordered .pp-create-input:focus {
    outline: none !important;
    border-color: #9C27B0 !important;
}

/* ============================================
   TAB HIGHLIGHT COLORS - FINAL OVERRIDE
   All tabs with 6px thick underlines
   ============================================ */

/* Base active state */
#settings-modal .settings-tabs .tab-btn.active {
    color: #000000 !important;
}

/* Brand Style tab - Teal */
#settings-modal .settings-tabs .tab-btn[data-tab="brand-style-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #80DABC !important;
}

/* Campaigns tab - PINK */
#settings-modal .settings-tabs .tab-btn[data-tab="campaigns-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #9C27B0 !important;
}

/* Questions tab - GREEN */
#settings-modal .settings-tabs .tab-btn[data-tab="questions-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #81b000 !important;
}

/* Workflow tab - Yellow */
#settings-modal .settings-tabs .tab-btn[data-tab="workflow-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #FFCC31 !important;
}

/* Release Form tab - Purple */
#settings-modal .settings-tabs .tab-btn[data-tab="release-form-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #9333ea !important;
}

/* Analytics tab - Blue */
#settings-modal .settings-tabs .tab-btn[data-tab="analytics-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #3498DB !important;
}

/* Story Credits tab - Orange */
#settings-modal .settings-tabs .tab-btn[data-tab="story-credits-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #EB8616 !important;
}