/* ===================================================================
   BODY SCROLL LOCK - Prevent background scrolling when modals open
   =================================================================== */

body.pp-modal-open,
html.pp-modal-open {
    overflow: hidden !important;
    height: 100% !important;
    width: 100% !important;
}

/* Prevent scrolling on the main content when modal is open */
body.pp-modal-open .proofpoints-dashboard-wrapper,
body.pp-modal-open #proofpoints-dashboard,
body.pp-modal-open .pp-dashboard-container {
    overflow: hidden !important;
}

/* ===================================================================
   CRITICAL ISOLATION - Prevents other modal systems from interfering
   Only isolates the #settings-modal container itself
   =================================================================== */

#settings-modal {
    /* Prevent inheritance from other modal systems */
    all: revert !important;
    
    /* Re-establish critical base properties */
    display: none !important;
    position: fixed !important;
    z-index: 999999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    font-family: 'Lexend Deca', sans-serif !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

#settings-modal[style*="display: block"],
#settings-modal.show {
    display: block !important;
}

/* Ensure all children use Lexend Deca */
#settings-modal,
#settings-modal * {
    font-family: 'Lexend Deca', sans-serif !important;
}

/* ===================================================================
   END ISOLATION - Rest of styles below are preserved
   =================================================================== */

/* ProofPoints Modal Styles - REAL FIX VERSION 3 */

/* Modal base styles - only for ProofPoints modals (NOT settings-modal which is fullscreen) */
.proofpoints-dashboard-wrapper .modal:not(#settings-modal):not(#featured-image-modal),
#safe-forgot-modal,
#reset-password-modal {
    display: none;
    position: fixed;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.proofpoints-dashboard-wrapper .modal[style*="display: block"],
.proofpoints-dashboard-wrapper .modal.show,
#safe-forgot-modal[style*="display: block"],
#reset-password-modal[style*="display: block"],
#settings-modal[style*="display: block"] {
    display: block !important;
}

.proofpoints-dashboard-wrapper .modal-content:not(#featured-image-modal .modal-content),
#safe-forgot-modal .modal-content,
#reset-password-modal .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 90%;
    max-width: 500px;
    position: relative;
    z-index: 1000000;
}

/* Modal close button */
.proofpoints-dashboard-wrapper .close:not(#featured-image-modal .close),
#safe-forgot-modal .close,
#reset-password-modal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.proofpoints-dashboard-wrapper .close:hover,
.proofpoints-dashboard-wrapper .close:focus,
#safe-forgot-modal .close:hover,
#reset-password-modal .close:hover {
    color: black;
}

/* Common button styles for modals */
.proofpoints-dashboard-wrapper .modal-btn,
#safe-forgot-modal .modal-btn,
#reset-password-modal .modal-btn {
    background: var(--pp-primary-color, #C0E600);
    color: var(--pp-dark-color, #333);
    border: none;
    padding: 10px 20px;
    border-radius: var(--pp-border-radius, 25px);
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'Lexend Deca', sans-serif;
}

.proofpoints-dashboard-wrapper .modal-btn:hover,
#safe-forgot-modal .modal-btn:hover,
#reset-password-modal .modal-btn:hover {
    background: #a6c500;
}

/* Featured Image Modal specific styles - MATCHES IMAGE MANAGER MODAL */
#featured-image-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    z-index: 999999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

/* When shown via jQuery .show() or style="display: block" */
#featured-image-modal[style*="display: block"],
#featured-image-modal[style*="display:block"],
#featured-image-modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#featured-image-modal .modal-content,
#featured-image-modal .image-modal-content {
    background: white !important;
    border-radius: 12px !important;
    width: 95% !important;
    max-width: 1000px !important;
    max-height: 85vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    position: relative !important;
    z-index: 999999999 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#featured-image-modal .modal-header {
    padding: 20px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;
    flex-shrink: 0 !important;
}

#featured-image-modal .modal-title,
#featured-image-modal .modal-header h3,
#featured-image-modal .modal-header h2 {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    order: 1 !important;
}

#featured-image-modal .close {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: #999 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s !important;
    order: 2 !important;
    float: none !important;
    position: static !important;
}

#featured-image-modal .close:hover {
    color: #333 !important;
}

#featured-image-modal .modal-body,
#featured-image-modal .image-modal-body {
    padding: 20px !important;
    overflow: hidden !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5f5f5 !important;
    min-height: 0 !important;
}

#featured-image-modal .modal-body img,
#featured-image-modal .image-modal-body img,
#featured-image-modal #featured-image-large {
    max-width: 100% !important;
    max-height: 60vh !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}

#featured-image-modal .modal-footer,
#featured-image-modal .image-modal-footer {
    padding: 15px 20px !important;
    border-top: 1px solid #e0e0e0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 10px !important;
}

#featured-image-modal .modal-info {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    color: #666 !important;
}

#featured-image-modal .modal-actions {
    display: flex !important;
    gap: 10px !important;
}

/* Base button style */
#featured-image-modal .modal-action-btn {
    padding: 0 20px !important;
    border-radius: 6px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    height: 35px !important;
    line-height: 35px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Download button - outline style */
#featured-image-modal .modal-action-btn.outline,
#featured-image-modal #download-image-btn {
    background: transparent !important;
    color: #666 !important;
    border: 1px solid #999 !important;
}

#featured-image-modal .modal-action-btn.outline:hover,
#featured-image-modal #download-image-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: #666 !important;
    color: #333 !important;
}

/* Close button - dark style */
#featured-image-modal .modal-action-btn.dark,
#featured-image-modal #close-image-modal {
    background: #333 !important;
    color: white !important;
    border: none !important;
}

#featured-image-modal .modal-action-btn.dark:hover,
#featured-image-modal #close-image-modal:hover {
    background: #444 !important;
}

/* Settings Modal - FULLSCREEN LAYOUT */
#settings-modal .modal-content,
#settings-modal .settings-modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
}

/* Modal Header (FIXED HEIGHT) */
#settings-modal .modal-header {
    background: white !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding: 10px 40px 0 40px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Close button */
#settings-modal-close,
#settings-modal .modal-close-x,
#settings-modal .close {
    position: absolute !important;
    right: 20px !important;
    top: 10px !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    font-size: 24px !important;
    color: #666 !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
    border-radius: 6px !important;
    z-index: 100 !important;
    line-height: 1 !important;
    font-weight: 300 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Ensure the X character itself is centered */
#settings-modal-close::before,
#settings-modal .modal-close-x::before,
#settings-modal .close::before {
    content: none !important;
}

#settings-modal .close:hover,
#settings-modal-close:hover,
#settings-modal .modal-close-x:hover {
    color: #333 !important;
    background: #e5e7eb !important;
    border-color: #d1d5db !important;
}

/* Tab buttons styling */
#settings-modal .tab-buttons,
#settings-modal .settings-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    border-bottom: 2px solid #e5e7eb !important;
    margin: 0 -40px 0 -40px !important;
    padding: 0 40px !important;
    background: white !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

/* Custom scrollbar for settings tabs */
#settings-modal .settings-tabs::-webkit-scrollbar {
    height: 4px;
}

#settings-modal .settings-tabs::-webkit-scrollbar-track {
    background: transparent;
}

#settings-modal .settings-tabs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

#settings-modal .tab-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 10px 24px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 6px solid transparent !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    position: relative !important;
    border-radius: 0 !important;
    margin: 0 0 -2px 0 !important;
}

#settings-modal .tab-btn:hover {
    color: #374151 !important;
    background: transparent !important;
}

/* Active tab with colored bottom border - 6px thick */
#settings-modal .tab-btn.active {
    color: #000000 !important;
    font-weight: 500 !important;
    background: transparent !important;
}

#settings-modal .tab-btn[data-tab="brand-style-tab"].active {
    border-bottom: 6px solid #80DABC !important;
}

#settings-modal .tab-btn[data-tab="story-credits-tab"].active {
    border-bottom: 6px solid #D4A800 !important;
}

#settings-modal .tab-btn[data-tab="analytics-tab"].active {
    border-bottom: 6px solid #3498DB !important;
}

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

/* Modal Body - CRITICAL: Must flex and pass height down */
#settings-modal.modal .modal-body,
#settings-modal.modal .settings-modal-body,
.modal#settings-modal .modal-body,
.modal#settings-modal .settings-modal-body {
    flex: 1 !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    background: white !important;
    position: relative !important;
    padding-bottom: 56px !important;
    padding-top: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* CRITICAL FIX: Override inline styles from PHP that break flex */
#settings-modal.modal .tab-content,
#settings-modal.modal div.tab-content,
.modal#settings-modal .tab-content,
.modal#settings-modal div.tab-content {
    background-color: white !important;
    padding: 15px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important; /* Override PHP's height: 100% */
    display: none !important;
    flex: 1 !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Brand Style Tab - NO PADDING to maximize notebook space */
#settings-modal.modal #brand-style-tab,
.modal#settings-modal #brand-style-tab,
#settings-modal #brand-style-tab.tab-content {
    padding: 0 !important;
    overflow: hidden !important;
}

/* CRITICAL: Only show the active tab - MUST BE WHEN display: block inline style exists */
#settings-modal .tab-content[style*="display: block"],
#settings-modal.modal .tab-content[style*="display: block"],
.modal#settings-modal .tab-content[style*="display: block"],
#settings-modal div.tab-content[style*="display: block"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    left: auto !important;
}

/* CRITICAL: Hide all inactive tabs completely - HIGHEST PRIORITY */
#settings-modal.modal #brand-style-tab:not([style*="display: block"]),
#settings-modal.modal #story-credits-tab:not([style*="display: block"]),
#settings-modal.modal #analytics-tab:not([style*="display: block"]),
#settings-modal.modal #campaigns-tab:not([style*="display: block"]),
.modal#settings-modal #brand-style-tab:not([style*="display: block"]),
.modal#settings-modal #story-credits-tab:not([style*="display: block"]),
.modal#settings-modal #analytics-tab:not([style*="display: block"]),
.modal#settings-modal #campaigns-tab:not([style*="display: block"]),
#settings-modal div#brand-style-tab.tab-content:not([style*="display: block"]),
#settings-modal div#story-credits-tab.tab-content:not([style*="display: block"]),
#settings-modal div#analytics-tab.tab-content:not([style*="display: block"]),
#settings-modal div#campaigns-tab.tab-content:not([style*="display: block"]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Tab heading styling */
#settings-modal .tab-heading,
#settings-modal.modal .tab-heading,
.modal#settings-modal h3.tab-heading {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 18px !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    color: #333 !important;
    line-height: 1.3 !important;
    flex-shrink: 0 !important;
}

.tab-content p {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 20px !important;
}

/* Override for brand knowledge editor - must match Story tab PPEditor */
.tab-content .bkn-editor-content,
.tab-content .bkn-editor-content p,
.tab-content .bkn-editor-content h1,
.tab-content .bkn-editor-content h2,
.tab-content .bkn-editor-content h3,
.tab-content .bkn-editor-content h4,
.tab-content .bkn-editor-content li,
.tab-content .bkn-editor-content blockquote,
#brand-style-tab .bkn-editor-content,
#brand-style-tab .bkn-editor-content p,
#brand-style-tab .bkn-editor-content h1,
#brand-style-tab .bkn-editor-content h2,
#brand-style-tab .bkn-editor-content h3,
#brand-style-tab .bkn-editor-content h4,
#brand-style-tab .bkn-editor-content li,
#brand-style-tab .bkn-editor-content blockquote {
    font-family: 'Lexend Deca', sans-serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    line-height: 1.3em !important;
    color: #333 !important;
}

#brand-style-tab .bkn-editor-content p,
.tab-content .bkn-editor-content p {
    margin: 0 0 0.4em 0 !important;
}

#brand-style-tab .bkn-editor-content h4,
.tab-content .bkn-editor-content h4 {
    font-size: 1.25em !important;
    font-weight: 500 !important;
    margin: 0.75em 0 0.5em 0 !important;
    line-height: 1.2 !important;
}

/* Brand Settings Editor Container - CRITICAL FLEX CHAIN */
#settings-modal #brand-settings-editor-container,
#settings-modal.modal #brand-settings-editor-container,
.modal#settings-modal #brand-settings-editor-container,
#settings-modal #brand-style-tab #brand-settings-editor-container {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: auto !important; /* Override any inline height */
}

/* Brand Style tab must be flex container - ONLY WHEN ACTIVE */
#settings-modal #brand-style-tab[style*="display: block"],
#settings-modal.modal #brand-style-tab[style*="display: block"],
.modal#settings-modal #brand-style-tab[style*="display: block"],
#settings-modal div#brand-style-tab.tab-content[style*="display: block"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important; /* Override PHP inline height: 100% */
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

/* Brand Knowledge Notebook container - must be flex to pass height */
#settings-modal #brand-knowledge-notebook,
#settings-modal.modal #brand-knowledge-notebook,
.modal#settings-modal #brand-knowledge-notebook,
#settings-modal #brand-style-tab #brand-knowledge-notebook {
    display: flex !important;
    flex-direction: row !important;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Editor container - must be flex column */
#settings-modal #bkn-editor-container,
#settings-modal.modal #bkn-editor-container,
.modal#settings-modal #bkn-editor-container,
#brand-knowledge-notebook #bkn-editor-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Editor wrapper - flex container */
#settings-modal #bkn-editor-wrapper,
#settings-modal.modal #bkn-editor-wrapper,
.modal#settings-modal #bkn-editor-wrapper,
#bkn-editor-container #bkn-editor-wrapper {
    flex: 1 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CRITICAL: Make textarea fill ALL available space - MAXIMUM SPECIFICITY */
#settings-modal #brand-style-tab #brand-settings-editor-container #bkn-editor-wrapper #brand-settings-editor {
    flex: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;
    resize: none !important;
    font-size: 28px !important; 
    line-height: 1.3em !important;
    font-family: 'Lexend Deca', -apple-system, BlinkMacSystemFont, sans-serif !important;
    padding: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background-color: #fafafa !important;
    box-sizing: border-box !important;
}

/* Fallback with less specificity */
#settings-modal #brand-settings-editor {
    flex: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: none !important;
    box-sizing: border-box !important;
}

/* Absolute fallback */
#brand-settings-editor {
    flex: 1 !important;
    height: auto !important;
    box-sizing: border-box !important;
}

#brand-settings-editor:focus {
    outline: none !important;
    border-color: #80DABC !important;
    background-color: #fff !important;
}

/* Form styling for New Story tab */
.story-form {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.story-form .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    position: relative;
}

.story-form .form-row label {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    margin-bottom: 3px !important;
    color: #333 !important;
    font-weight: 400 !important;
}

.char-limit {
    font-size: 12px !important;
    color: #999 !important;
    font-weight: 300 !important;
}

.story-form .form-row input {
    padding: 8px 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    transition: all 0.3s !important;
    margin-bottom: 0 !important;
}

.story-form .form-row input:focus {
    outline: none !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1) !important;
}

.char-counter {
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 11px !important;
    color: #999 !important;
    text-align: right !important;
    margin-top: 2px !important;
}

.char-counter.limit-reached {
    color: #e53e3e !important;
    font-weight: 500 !important;
}

/* Footer styling - ELEGANT ROUNDED BUTTONS */
#settings-modal .modal-footer,
#settings-modal .settings-modal-footer,
#settings-modal.modal .modal-footer,
.modal#settings-modal .modal-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 12px 30px !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 20 !important;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05) !important;
    flex-shrink: 0 !important;
}

/* Hide all footers by default */
#brand-style-footer,
#story-credits-footer,
#analytics-footer,
#campaigns-footer,
#questions-footer,
#workflow-footer,
#release-form-footer {
    display: none !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Show active footer */
#brand-style-footer.active,
#story-credits-footer.active,
#analytics-footer.active,
#campaigns-footer.active,
#questions-footer.active,
#workflow-footer.active,
#release-form-footer.active {
    display: flex !important;
}

/* Questions and Campaigns footer with pagination - use space-between */
#questions-footer.active,
#campaigns-footer.active {
    justify-content: space-between !important;
}

/* ELEGANT ROUNDED RECTANGLE BUTTONS - from source code */
#settings-modal .modal-action-btn {
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

#settings-modal .modal-action-btn.primary-btn {
    background: #81b000 !important;
    color: white !important;
}

#settings-modal .modal-action-btn.primary-btn:hover {
    background: #6a9300 !important;
}

#settings-modal .modal-action-btn.secondary-btn {
    background: #1f2937 !important;
    color: white !important;
}

#settings-modal .modal-action-btn.secondary-btn:hover {
    background: #374151 !important;
}

/* Specific button overrides for each tab's primary color */
#save-brand-settings {
    background: #81b000 !important;
}

#request-credits-btn {
    background: #D4A800 !important;
}

#refresh-analytics-btn {
    background: #3498db !important;
}

/* Story Credits Tab specific styling */
#story-credits-tab {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.get-more-credits h4,
.get-more-credits h5 {
    margin-bottom: 10px !important;
}

.get-more-credits p:first-child {
    margin-bottom: 8px !important;
}

/* Sidebar toggle button - elegant small button on left edge */
#settings-modal #bkn-sidebar-toggle {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: #80DABC !important;
    color: white !important;
    border: none !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 12px 8px !important;
    cursor: pointer !important;
    z-index: 10000 !important;
    transition: all 0.3s ease !important;
    font-size: 18px !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#settings-modal #bkn-sidebar-toggle:hover {
    background: #6CC9AA !important;
    padding-left: 12px !important;
}

/* Sidebar with collapse/expand animation and FULL HEIGHT */
#settings-modal #bkn-sidebar {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 280px !important;
    background: #ffffff !important;
    border-right: 1px solid #e5e7eb !important;
    padding: 20px !important;
    overflow-y: auto !important;
    z-index: 9999 !important;
    transition: transform 0.3s ease !important;
}

/* Sidebar collapsed state */
#settings-modal #bkn-sidebar.collapsed {
    transform: translateX(-100%) !important;
}

/* Adjust editor when sidebar collapsed */
#settings-modal #brand-knowledge-notebook.sidebar-collapsed #bkn-editor-container {
    margin-left: 0 !important;
}

/* Give editor margin when sidebar visible (DEFAULT STATE) */
#settings-modal #brand-knowledge-notebook:not(.sidebar-collapsed) #bkn-editor-container {
    margin-left: 280px !important;
}

/* Campaigns tab - smaller text */
.campaign-section h4 {
    margin-top: 0;
    font-size: 15px !important;
    color: #333;
    font-weight: 500;
}

.campaign-section p {
    font-size: 13px !important;
    color: #666;
    margin-bottom: 12px !important;
    line-height: 1.5;
}

.campaign-section ul {
    text-align: left;
    margin: 10px 0;
    color: #666;
    line-height: 1.6;
    font-size: 12px !important;
    padding-left: 25px;
}

.campaign-section ul li {
    font-size: 12px !important;
    margin: 6px 0;
}

/* Copy button in Campaigns tab - SMALL and properly sized */
#copy-invitation-btn {
    padding: 6px 14px !important;
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
}

#copy-invitation-btn:hover {
    background: #2563eb !important;
}

/* Invitation link input - USE REMAINING WIDTH */
.invitation-link-section .invitation-link-input,
#invitation-link-input {
    flex: 1 !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    background: white !important;
    font-family: monospace !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
}

/* Ensure invitation label doesn't grow */
.invitation-link-section .invitation-label {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: auto !important;
}

/* Invitation link section flexbox layout */
.invitation-link-section > div {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    #settings-modal .modal-content {
        width: 98% !important;
        height: 98vh !important;
        margin: 1vh auto !important;
    }
}

@media (max-width: 1024px) {
    #settings-modal .modal-content {
        margin: 1% auto !important;
        max-height: 95vh !important;
    }
    
    #settings-modal .modal-header {
        padding: 15px 20px 0 20px !important;
    }
    
    #settings-modal .modal-body {
        max-height: calc(95vh - 140px) !important;
    }
    
    #settings-modal .tab-content {
        padding: 20px !important;
    }
    
    #settings-modal .tab-btn {
        font-size: 12px !important;
        padding: 8px 16px !important;
    }
    
    .story-form {
        gap: 6px;
    }
    
    .story-form .form-row label {
        margin-bottom: 2px !important;
    }
}

@media (max-width: 768px) {
    #settings-modal .modal-content {
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    
    #settings-modal .modal-header {
        border-radius: 0 !important;
        padding: 15px 20px !important;
    }
    
    #settings-modal .modal-body {
        max-height: calc(100vh - 120px) !important;
        border-radius: 0 !important;
    }
    
    #settings-modal .tab-content {
        padding: 20px !important;
    }
    
    #settings-modal .tab-btn {
        font-size: 12px !important;
        padding: 10px 15px !important;
    }
    
    /* Mobile sidebar adjustments */
    #settings-modal #bkn-sidebar {
        width: 100% !important;
    }
    
    #settings-modal #brand-knowledge-notebook:not(.sidebar-collapsed) #bkn-editor-container {
        margin-left: 0 !important;
    }
}

/* Modal header top row */
.modal-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 10px 0;
    gap: 20px;
}

/* Client greeting */
.client-greeting {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
}

/* Analytics Tab Styles */
.analytics-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Top Performing Stories heading - make smaller */
#analytics-content h3,
#analytics-content h4,
.analytics-container h3,
.analytics-container h4 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 20px 0 15px 0 !important;
}

.analytics-info h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 500;
}

.analytics-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.analytics-info ul {
    list-style-position: inside;
    margin: 15px 0;
}

.analytics-info li {
    font-size: 14px;
    color: #666;
    margin: 8px 0;
}

.analytics-actions {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

/* Campaigns Tab Styles */
.campaigns-container {
    max-width: 800px;
}

.campaign-section {
    margin-bottom: 30px;
}

.invitation-link-section {
    margin-bottom: 30px;
}

/* ============================================
   SAFE SURGICAL FIXES - ADD TO BOTTOM OF modals.css
   
   DO NOT touch Brand Style tab flex layout!
   These changes only affect:
   1. Button border-radius
   2. Story Credits tab styling
   
   NO changes to flex, display, overflow, or layout
   ============================================ */


/* ============================================
   FIX 1: BUTTON BORDER RADIUS ONLY
   Changes pill buttons to rounded rectangular
   ============================================ */

/* Change all modal and dashboard buttons to rounded rectangular */
#settings-modal button:not(.tab-btn):not(#bkn-sidebar-toggle),
#settings-modal .modal-action-btn,
.proofpoints-dashboard-wrapper #new-story-btn,
.proofpoints-dashboard-wrapper .action-btn,
.proofpoints-dashboard-wrapper .view-draft,
.proofpoints-dashboard-wrapper .details-link,
.proofpoints-dashboard-wrapper .delete-story,
.proofpoints-dashboard-wrapper .approve-story,
.proofpoints-dashboard-wrapper .download-word-btn,
.proofpoints-dashboard-wrapper .share-linkedin,
.proofpoints-dashboard-wrapper .pagination-btn,
.proofpoints-dashboard-wrapper .page-number,
.login-btn,
#client-login-btn,
#admin-login-btn,
#copy-invitation-btn {
    border-radius: 6px !important;  /* Changed from 20px (pill) to 6px (rounded rect) */
}

/* Ensure tab buttons stay square */
#settings-modal .tab-btn {
    border-radius: 0 !important;
}


/* ============================================
   FIX 2: STORY CREDITS TAB REDESIGN - CLEAN VERSION
   Only affects #story-credits-tab - ZERO impact on Brand Style
   ============================================ */

/* Tab container spacing */
#story-credits-tab.tab-content {
    padding: 30px !important;
}

/* Credits content container - constrain width to match analytics */
#story-credits-tab #story-credits-content,
#story-credits-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* Credits container */
#story-credits-tab .credits-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
}

/* Credits info card - CLEAN WHITE DESIGN (removed orange gradient) */
#story-credits-tab .credits-info {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 30px !important;
    text-align: center !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* Remove decorative emoji */
#story-credits-tab .credits-info::before {
    content: '' !important;
    display: none !important;
}

/* Smaller, more subtle credits count */
#story-credits-tab #credits-count {
    display: block !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    color: #D4A800 !important;  /* Yellow/gold color for credits */
    font-family: 'Lexend Deca', sans-serif !important;
    margin-bottom: 10px !important;
    line-height: 1 !important;
}

/* Subtext below count */
#story-credits-tab .credits-info > p {
    font-size: 14px !important;
    color: #6b7280 !important;  /* CHANGED from #8B5A00 brown to gray */
    margin: 0 !important;
}

/* Request more credits card */
#story-credits-tab .get-more-credits {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

#story-credits-tab .get-more-credits > p:first-child {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin: 0 0 20px 0 !important;
}

/* Form styling */
#story-credits-tab .form-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
}

#story-credits-tab .form-row label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4b5563 !important;
}

/* Styled dropdown */
#story-credits-tab select,
#story-credits-tab #credits-amount {
    width: 100% !important;
    padding: 12px 15px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    background: white !important;
    cursor: pointer !important;
    transition: border-color 0.2s !important;
}

#story-credits-tab select:focus,
#story-credits-tab #credits-amount:focus {
    outline: none !important;
    border-color: #3b82f6 !important;  /* CHANGED from #EB8616 to blue */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;  /* CHANGED to blue */
}

#story-credits-tab select:hover,
#story-credits-tab #credits-amount:hover {
    border-color: #d1d5db !important;
}

/* Info text */
#story-credits-tab .get-more-credits > p:last-child {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
    #story-credits-tab #credits-count {
        font-size: 28px !important;  /* CHANGED from 36px to be even smaller on mobile */
    }
    
    #story-credits-tab .credits-info,
    #story-credits-tab .get-more-credits {
        padding: 20px !important;
    }
}

/* ============================================
   END OF SAFE SURGICAL FIXES
   ============================================ */

/* ============================================
   CAMPAIGNS TABLE STYLES
   Styles for the campaigns tab table layout
   Column order: 1=Name, 2=Status, 3=Questions, 4=Responses, 5=Modified, 6=Share, 7=Edit
   ============================================ */

/* Campaign name cell - ID and name inline */
#settings-modal .pp-campaign-name-cell {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#settings-modal .pp-campaign-id {
    flex: 0 0 auto !important;
    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;
}

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

/* Share and Edit columns - match questions table actions column width */
#settings-modal .pp-share-col,
#settings-modal .pp-edit-col {
    width: 120px !important;
    text-align: center !important;
    padding: 8px !important;
}

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

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

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

#settings-modal .pp-campaign-url-cell {
    text-align: right !important;
}

#settings-modal .pp-campaign-url-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: flex-end !important;
}

#settings-modal .pp-campaign-url-field {
    width: 200px !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;
}

#settings-modal .pp-campaign-url-field:focus {
    outline: none !important;
    border-color: #9C27B0 !important;
    background: white !important;
}

#settings-modal .pp-copy-url-btn {
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    background: #9C27B0 !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

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

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

/* ============================================
   CAMPAIGNS TABLE COLUMN WIDTHS (backup/override)
   Column order: 1=Name, 2=Status, 3=Questions, 4=Responses, 5=Modified, 6=Share, 7=Edit
   ============================================ */

/* Status column (column 2) */
#settings-modal #campaigns-table th:nth-child(2),
#settings-modal #campaigns-table td:nth-child(2) {
    width: 80px !important;
    max-width: 80px !important;
    text-align: center !important;
}

/* Questions column (column 3) */
#settings-modal #campaigns-table th:nth-child(3),
#settings-modal #campaigns-table td:nth-child(3) {
    width: 80px !important;
    max-width: 80px !important;
    text-align: center !important;
}

/* Responses column (column 4) */
#settings-modal #campaigns-table th:nth-child(4),
#settings-modal #campaigns-table td:nth-child(4) {
    width: 80px !important;
    max-width: 80px !important;
    text-align: center !important;
}

/* Modified column (column 5) */
#settings-modal #campaigns-table th:nth-child(5),
#settings-modal #campaigns-table td:nth-child(5) {
    width: 100px !important;
    max-width: 100px !important;
}

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

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

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

/* ============================================
   END CAMPAIGNS TABLE STYLES
   ============================================ */
   
   /**
 * WORKFLOW TAB CSS UPDATES
 * 
 * Add these styles to the settings-modal.php <style> section
 * OR create a separate CSS file and enqueue it
 * 
 * Changes: Timeline spans full width, items stay aligned
 */

/* ============================================
   WORKFLOW TAB - FULL WIDTH LAYOUT
   ============================================ */

/* Make workflow tab use full width */
#workflow-tab {
    padding: 30px;
    max-width: none;
}

/* Playbook grid - 5 columns that scale */
.ppwf-playbook-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
}

@media (max-width: 1400px) {
    .ppwf-playbook-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }
    
    .ppwf-playbook-card {
        padding: 16px 12px;
    }
    
    .ppwf-card-description {
        font-size: 12px;
    }
}

@media (max-width: 1100px) {
    .ppwf-playbook-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .ppwf-playbook-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Timeline Container - 70% Width, Centered */
.ppwf-timeline-container {
    background: #f9fafb;
    border-radius: 12px;
    padding: 20px 30px;
    margin-top: 20px;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Timeline Track - Evenly Distributed */
.ppwf-timeline-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 0;
}

/* Timeline Stage - Flex Item */
.ppwf-timeline-stage,
.ppwf-timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 85px;
}

/* Stage Icon - Smaller */
.ppwf-stage-icon,
.ppwf-timeline-step-icon {
    width: 38px;
    height: 38px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

/* Stage Name */
.ppwf-stage-name,
.ppwf-timeline-step-name {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    max-width: 80px;
    line-height: 1.2;
}

/* Arrow between stages - Smaller */
.ppwf-timeline-arrow {
    color: #d1d5db;
    font-size: 16px;
    flex-shrink: 0;
    margin: 0 -5px;
}

/* Responsive timeline */
@media (max-width: 900px) {
    .ppwf-timeline-container {
        width: 90%;
    }
    
    .ppwf-timeline-track {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .ppwf-timeline-stage,
    .ppwf-timeline-step {
        flex: 0 0 auto;
        max-width: 60px;
    }
    
    .ppwf-stage-icon,
    .ppwf-timeline-step-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .ppwf-stage-name,
    .ppwf-timeline-step-name {
        font-size: 9px;
    }
    
    .ppwf-timeline-arrow {
        font-size: 14px;
    }
}

/* Custom Builder - Full Width */
.ppwf-custom-builder {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 12px;
    padding: 24px 30px;
    margin-top: 20px;
    display: none;
    width: 100%;
    box-sizing: border-box;
}

.ppwf-custom-builder.visible {
    display: block;
}

/* Custom options in row layout on wide screens */
.ppwf-custom-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.ppwf-custom-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;
}

@media (max-width: 800px) {
    .ppwf-custom-options {
        flex-direction: column;
        gap: 12px;
    }
}

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

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

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

/* Button spinner for save/loading states */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: btn-spin 0.8s ease-in-out infinite;
    margin-right: 8px;
    vertical-align: middle;
}

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

/* ============================================
   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: 500px !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 - 100px) !important;
    }
    
    /* Tab content needs proper height */
    #settings-modal .tab-content {
        min-height: 150px !important;
        max-height: calc(100vh - 160px) !important;
        overflow-y: auto !important;
    }
    
    /* Table wrapper should fill available space */
    #settings-modal .pp-table-wrapper {
        max-height: calc(100vh - 260px) !important;
        overflow: auto !important;
    }
    
    /* Reduce padding */
    #settings-modal .tab-content {
        padding: 12px !important;
    }
    
    /* Compact filter bar */
    #settings-modal .pp-filter-bar {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
}

/* ===================================================================
   SETTINGS MODAL PAGINATION STYLING
   =================================================================== */

/* Page buttons in footer */
#settings-modal .pp-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 8px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: white !important;
    color: #374151 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

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

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

/* Active page number - LIME GREEN to match tab highlight */
#settings-modal .pp-page-btn.active,
#settings-modal .pp-page-numbers .pp-page-btn.active,
#settings-modal .footer-buttons .pp-page-btn.active {
    background: #C0E600 !important;
    border-color: #C0E600 !important;
    color: #333 !important;
    font-weight: 500 !important;
}

/* Per-page select styling */
#settings-modal .pp-per-page-select {
    padding: 6px 28px 6px 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E") no-repeat right 8px center !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 13px !important;
    color: #374151 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* ============================================
   FINAL TAB HIGHLIGHT OVERRIDES - ALL TABS
   Thick 6px underlines, consistent styling
   ============================================ */

/* Base tab styling */
#settings-modal .tab-btn,
#settings-modal .settings-tabs .tab-btn {
    border: none !important;
    border-bottom: 6px solid transparent !important;
    margin-bottom: -2px !important;
    padding: 10px 24px 8px 24px !important;
    background: transparent !important;
    color: #6b7280 !important;
    font-family: 'Lexend Deca', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

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

/* Active tab base - black text */
#settings-modal .tab-btn.active,
#settings-modal .settings-tabs .tab-btn.active {
    color: #000000 !important;
}

/* Brand Style tab - Teal */
#settings-modal .tab-btn[data-tab="brand-style-tab"].active,
#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 .tab-btn[data-tab="campaigns-tab"].active,
#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 .tab-btn[data-tab="questions-tab"].active,
#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 .tab-btn[data-tab="workflow-tab"].active,
#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 .tab-btn[data-tab="release-form-tab"].active,
#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 .tab-btn[data-tab="analytics-tab"].active,
#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 .tab-btn[data-tab="story-credits-tab"].active,
#settings-modal .settings-tabs .tab-btn[data-tab="story-credits-tab"].active {
    color: #000000 !important;
    border-bottom: 6px solid #EB8616 !important;
}