/**
 * Careers Portal Terminal Stylesheet
 * File: assets/css/portal-layout.css
 */

.gsyncd-portal-terminal {
    background: #000000 !important;
    border: 1px solid #252525 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace !important;
    width: 100% !important;
}

.gsyncd-portal-header {
    background: #141414 !important;
    border-bottom: 1px solid #252525 !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.term-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    display: inline-block !important;
}
.dot-red { background: #ff5f56 !important; }
.dot-yellow { background: #ffbd2e !important; }
.dot-green { background: #27c93f !important; }

.term-title {
    color: #888888 !important;
    font-size: 11px !important;
    margin-left: 10px !important;
    font-family: inherit !important;
}

.section-title {
    color: #C8FF4B !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #222222 !important;
    padding-bottom: 8px !important;
    font-family: inherit !important;
}

body.light-theme .section-title {
    color: #1C5E21 !important;
}

.text-center {
    text-align: center !important;
}

/* Zone B: Horizontal Job Pipeline */
.gsyncd-portal-jobs-section {
    margin-bottom: 30px !important;
}



.gsyncd-horizontal-pipeline {
    display: flex !important;
    flex-direction: row !important;
    gap: 20px !important;
    overflow-x: auto !important;
    padding-bottom: 20px !important;
    scroll-behavior: smooth !important;
    align-items: stretch !important; /* Stretch all cards to match the height of the tallest one */
    -webkit-overflow-scrolling: touch !important; /* Smooth touch momentum scroll on iOS */
}

/* Scrollbar styles for horizontal scrolling pipeline */
.gsyncd-horizontal-pipeline::-webkit-scrollbar {
    height: 6px !important;
}
.gsyncd-horizontal-pipeline::-webkit-scrollbar-track {
    background: #141414 !important;
    border-radius: 3px !important;
}
.gsyncd-horizontal-pipeline::-webkit-scrollbar-thumb {
    background: #C8FF4B !important;
    border-radius: 3px !important;
}
body.light-theme .gsyncd-horizontal-pipeline::-webkit-scrollbar-thumb {
    background: #1b5e20 !important;
}
.gsyncd-horizontal-pipeline {
    scrollbar-width: thin !important;
    scrollbar-color: #C8FF4B #141414 !important;
}
body.light-theme .gsyncd-horizontal-pipeline {
    scrollbar-color: #1b5e20 #f0f0f0 !important;
}

.gsyncd-job-card {
    flex: 0 0 280px !important;
    background: #0a0a0a !important;
    border: 1px solid #222222 !important;
    border-radius: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    height: auto !important; /* Allow height to adjust dynamically based on title length */
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
    transition: border-color 0.22s ease !important;
}

.gsyncd-job-card:hover,
.gsyncd-job-card.active-job {
    border-color: #b3ff00 !important;
}

.job-card-meta {
    padding: 18px 18px 10px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-grow: 1 !important; /* Fill space so buttons align cleanly at the bottom */
}

.job-card-title {
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    font-family: inherit !important;
    white-space: normal !important; /* Wrap titles to multiple lines so they are seen in full */
    display: block !important;
}

.job-card-dept {
    color: #888888 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.btn-run-requirements {
    width: 100% !important;
    text-align: center !important;
    background: #141414 !important;
    border: none !important;
    border-top: 1px solid #222222 !important;
    padding: 14px 10px !important;
    color: #C8FF4B !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: all 0.22s ease !important;
    outline: none !important;
}

.btn-run-requirements:hover {
    background: #C8FF4B !important;
    color: #000000 !important;
    box-shadow: 0 -4px 15px rgba(200, 255, 75, 0.2) !important;
}

body.light-theme .btn-run-requirements {
    color: #1b5e20 !important;
    background: #ffffff !important;
    border-top: 1px solid #d8e2ef !important;
}

body.light-theme .btn-run-requirements:hover {
    background: #1b5e20 !important;
    color: #ffffff !important;
    box-shadow: 0 -4px 15px rgba(27, 94, 32, 0.2) !important;
}

/* Zone C: Full-Width Requirement Engine Below Pipeline */
.gsyncd-requirement-section {
    margin-top: 30px !important;
    width: 100% !important;
}

.requirement-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid #222222 !important;
    padding-bottom: 8px !important;
}

.requirement-header-row .section-title {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.btn-terminate {
    background: transparent !important;
    border: 1px solid #ff4d4d !important;
    color: #ff4d4d !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 6px 12px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    transition: all 0.2s !important;
}

.btn-terminate:hover {
    background: #ff4d4d !important;
    color: #000000 !important;
    box-shadow: 0 0 10px rgba(255, 77, 77, 0.3) !important;
}

.gsyncd-requirement-terminal {
    background-color: #fafafa !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.25) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    border: 1px solid #d8e2ef !important;
    border-radius: 4px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
}

.requirement-content-box {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #111111 !important;
}

.gsyncd-requirement-terminal {
    background-color: #0d0d0d !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.015) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    border: 1px solid #252525 !important;
    border-radius: 4px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    margin-bottom: 24px !important;
}

body.light-theme .gsyncd-requirement-terminal {
    background-color: #fafafa !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.25) 1px, transparent 1px) !important;
    border: 1px solid #d8e2ef !important;
}

.requirement-content-box {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #ffffff !important;
}

body.light-theme .requirement-content-box {
    color: #111111 !important;
}

/* Ensure all nested typography elements inside requirement terminal are styled */
.requirement-content-box,
.requirement-content-box p,
.requirement-content-box li,
.requirement-content-box div,
.requirement-content-box span:not(.job-title-display):not(.job-dept-display),
.requirement-content-box strong {
    color: #ffffff !important;
}

body.light-theme .requirement-content-box,
body.light-theme .requirement-content-box p,
body.light-theme .requirement-content-box li,
body.light-theme .requirement-content-box div,
body.light-theme .requirement-content-box span:not(.job-title-display):not(.job-dept-display),
body.light-theme .requirement-content-box strong {
    color: #111111 !important;
}

.requirement-content-box h1,
.requirement-content-box h2,
.requirement-content-box h3,
.requirement-content-box h4,
.requirement-content-box h5,
.requirement-content-box h6 {
    color: #C8FF4B !important;
    font-family: inherit !important;
    font-weight: bold !important;
}

body.light-theme .requirement-content-box h1,
body.light-theme .requirement-content-box h2,
body.light-theme .requirement-content-box h3,
body.light-theme .requirement-content-box h4,
body.light-theme .requirement-content-box h5,
body.light-theme .requirement-content-box h6 {
    color: #1b5e20 !important;
}

.requirement-content-box .job-title-display {
    color: #C8FF4B !important;
    font-size: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    font-weight: bold !important;
}

body.light-theme .requirement-content-box .job-title-display {
    color: #1b5e20 !important;
}

.requirement-content-box .job-dept-display {
    color: #888888 !important;
    font-size: 11px !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
}

body.light-theme .requirement-content-box .job-dept-display {
    color: #555555 !important;
}

/* Apply Now centered trigger */
.gsyncd-apply-trigger-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
}

.gsyncd-btn-initialize {
    background: transparent !important;
    border: 1px solid #C8FF4B !important;
    color: #C8FF4B !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 12px 24px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    box-shadow: 0 0 10px rgba(200, 255, 75, 0.1) !important;
    transition: all 0.22s ease !important;
}

.gsyncd-btn-initialize:hover {
    background: #C8FF4B !important;
    color: #000000 !important;
    box-shadow: 0 0 18px rgba(200, 255, 75, 0.3) !important;
}

body.light-theme .gsyncd-btn-initialize {
    border: 1px solid #1b5e20 !important;
    color: #1b5e20 !important;
    box-shadow: 0 0 10px rgba(27, 94, 32, 0.1) !important;
}

body.light-theme .gsyncd-btn-initialize:hover {
    background: #1b5e20 !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(27, 94, 32, 0.3) !important;
}

/* Unified centered application form layout - Light Theme (Off-White Background) */
#sliding-form-container {
    max-width: 768px !important;
    margin: 30px auto 0 auto !important;
    background-color: #0d0d0d !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.015) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    border: 1px solid #252525 !important;
    border-radius: 4px !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

body.light-theme #sliding-form-container {
    background-color: #fafafa !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.25) 1px, transparent 1px) !important;
    border: 1px solid #d8e2ef !important;
}

#sliding-form-container .section-title {
    color: #C8FF4B !important;
    border-bottom: 1px solid #252525 !important;
}

body.light-theme #sliding-form-container .section-title {
    color: #1b5e20 !important;
    border-bottom: 1px solid #d8e2ef !important;
}

.form-row-split {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
}

.form-row-full {
    margin-bottom: 20px !important;
}

@media screen and (max-width: 600px) {
    .form-row-split {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

.form-group {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.form-group label {
    color: #ffffff !important; /* Default (Dark Mode) labels */
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 8px !important;
}

body.light-theme .form-group label {
    color: #111111 !important; /* Light Mode labels */
}

.form-group label span.req {
    color: #ff4d4d !important;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group input[type="tel"],
.form-group textarea {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #333333 !important; /* Default (Dark Mode) border */
    border-radius: 0 !important;
    color: #ffffff !important; /* Default (Dark Mode) text */
    font-family: inherit !important;
    font-size: 13px !important;
    padding: 8px 0 !important;
    width: 100% !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-bottom-color 0.22s ease, box-shadow 0.22s ease !important;
}

body.light-theme .form-group input[type="text"],
body.light-theme .form-group input[type="email"],
body.light-theme .form-group input[type="number"],
body.light-theme .form-group input[type="tel"],
body.light-theme .form-group textarea {
    border-bottom: 1px solid #cccccc !important;
    color: #111111 !important;
}

.form-group input[type="text"]::placeholder,
.form-group input[type="email"]::placeholder,
.form-group input[type="number"]::placeholder,
.form-group input[type="tel"]::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important; /* Default (Dark Mode) placeholder */
    opacity: 0.7 !important;
}

body.light-theme .form-group input[type="text"]::placeholder,
body.light-theme .form-group input[type="email"]::placeholder,
body.light-theme .form-group input[type="number"]::placeholder,
body.light-theme .form-group input[type="tel"]::placeholder,
body.light-theme .form-group textarea::placeholder {
    color: #888888 !important;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    border-bottom-color: #C8FF4B !important; /* Default (Dark Mode) focus */
    box-shadow: 0 4px 12px rgba(200, 255, 75, 0.08) !important;
}

body.light-theme .form-group input[type="text"]:focus,
body.light-theme .form-group input[type="email"]:focus,
body.light-theme .form-group input[type="number"]:focus,
body.light-theme .form-group input[type="tel"]:focus,
body.light-theme .form-group textarea:focus {
    border-bottom-color: #1b5e20 !important;
    box-shadow: 0 4px 12px rgba(27, 94, 32, 0.08) !important;
}

/* Radio Choice styling */
.radio-choices {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 8px 0 !important;
}

.radio-choice {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    color: #ffffff !important; /* Default (Dark Mode) text */
    font-size: 12px;
}

body.light-theme .radio-choice {
    color: #111111 !important;
}

.radio-choice input[type="radio"] {
    accent-color: #C8FF4B !important; /* Default (Dark Mode) */
}

body.light-theme .radio-choice input[type="radio"] {
    accent-color: #1b5e20 !important;
}

/* Checkbox choices styling */
.consent-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}

.checkbox-choice {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    cursor: pointer !important;
    color: #ffffff !important; /* Default (Dark Mode) text */
    font-size: 11px !important;
}

body.light-theme .checkbox-choice {
    color: #111111 !important;
}

.checkbox-choice input[type="checkbox"] {
    accent-color: #C8FF4B !important; /* Default (Dark Mode) */
    margin-top: 2px !important;
}

body.light-theme .checkbox-choice input[type="checkbox"] {
    accent-color: #1b5e20 !important;
}

.checkbox-choice span.req {
    color: #ff4d4d !important;
}

/* Dropzone Upload block styling */
.upload-block {
    margin-bottom: 24px !important;
}

.gsyncd-upload-dropzone {
    position: relative !important;
    border: 1px dashed #333333 !important; /* Default (Dark Mode) */
    background: #0d0d0d !important; /* Default (Dark Mode) */
    border-radius: 4px !important;
    padding: 20px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: border-color 0.22s, background-color 0.22s !important;
    box-sizing: border-box !important;
}

.gsyncd-upload-dropzone:hover,
.gsyncd-upload-dropzone.dragover {
    border-color: #C8FF4B !important; /* Default (Dark Mode) */
    background-color: rgba(200, 255, 75, 0.02) !important;
}

body.light-theme .gsyncd-upload-dropzone {
    border: 1px dashed #cccccc !important;
    background: #fdfdfd !important;
}

body.light-theme .gsyncd-upload-dropzone:hover,
body.light-theme .gsyncd-upload-dropzone.dragover {
    border-color: #1b5e20 !important;
    background-color: rgba(27, 94, 32, 0.02) !important;
}

.gsyncd-upload-dropzone .file-input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

.dropzone-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: none !important;
}

.dz-icon {
    font-size: 16px !important;
    color: #C8FF4B !important; /* Default (Dark Mode) */
    font-weight: bold !important;
}

body.light-theme .dz-icon {
    color: #1b5e20 !important;
}

.dz-text {
    font-size: 10px !important;
    color: #888888 !important; /* Default (Dark Mode) */
}

body.light-theme .dz-text {
    color: #555555 !important;
}

.selected-file-name {
    font-size: 11px !important;
    color: #C8FF4B !important; /* Default (Dark Mode) */
    font-weight: 700 !important;
}

body.light-theme .selected-file-name {
    color: #1b5e20 !important;
}

/* Submit row button */
.submit-action-row {
    margin-top: 12px !important;
}

.gsyncd-term-btn {
    background: transparent !important;
    border: 1px solid #C8FF4B !important;
    color: #C8FF4B !important;
    font-family: inherit !important;
    font-weight: bold !important;
    font-size: 13px !important;
    padding: 12px 28px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 0 10px rgba(200, 255, 75, 0.1) !important;
    transition: all 0.22s ease !important;
}

.gsyncd-term-btn:hover {
    background: #C8FF4B !important;
    color: #000000 !important;
    box-shadow: 0 0 18px rgba(200, 255, 75, 0.3) !important;
}

body.light-theme .gsyncd-term-btn {
    border: 1px solid #1b5e20 !important;
    color: #1b5e20 !important;
    box-shadow: 0 0 10px rgba(27, 94, 32, 0.1) !important;
}

body.light-theme .gsyncd-term-btn:hover {
    background: #1b5e20 !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(27, 94, 32, 0.3) !important;
}

.btn-cursor {
    animation: gsyncd-cursor-blink 900ms step-end infinite !important;
}

@keyframes gsyncd-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Diagnostic Output Console Log - Light Theme */
.form-console-log {
    background: #ffffff !important; /* white console box */
    border: 1px solid #d8e2ef !important;
    border-radius: 4px !important;
    padding: 16px !important;
    margin-top: 24px !important;
    max-height: 180px !important;
    overflow-y: auto;
    box-sizing: border-box !important;
}

.console-entries {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.log-entry {
    font-size: 11px !important;
    color: #555555 !important;
    line-height: 1.4 !important;
}

.log-entry.log-green {
    color: #1b5e20 !important;
}

.log-entry.log-red {
    color: #ff4d4d !important;
}

/* Force Careers Portal wrappers and ancestors to be full-width backgrounds */
body.gsyncd-core-careers-page {
    background-color: #0d0d0d !important;
}

body.gsyncd-core-careers-page #page,
body.gsyncd-core-careers-page .site,
body.gsyncd-core-careers-page #content,
body.gsyncd-core-careers-page .site-content,
body.gsyncd-core-careers-page #primary,
body.gsyncd-core-careers-page .site-main {
    background-color: #0d0d0d !important;
    background-image: none !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Ensure Elementor templates are overridden for full-width */
body.gsyncd-core-careers-page .elementor,
body.gsyncd-core-careers-page .elementor-section-wrap,
body.gsyncd-core-careers-page .elementor-section {
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Scoped Jobs/Careers Page background grid lines override (Default / Dark Mode) */
body.gsyncd-core-careers-page .contact-body-container {
    background-color: #0d0d0d !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.015) 1px, transparent 1px) !important;
}

/* Light Mode Overrides */
body.light-theme.gsyncd-core-careers-page {
    background-color: #fafafa !important;
}

body.light-theme.gsyncd-core-careers-page #page,
body.light-theme.gsyncd-core-careers-page .site,
body.light-theme.gsyncd-core-careers-page #content,
body.light-theme.gsyncd-core-careers-page .site-content,
body.light-theme.gsyncd-core-careers-page #primary,
body.light-theme.gsyncd-core-careers-page .site-main {
    background-color: #fafafa !important;
}

body.light-theme.gsyncd-core-careers-page .contact-body-container {
    background-color: #fafafa !important;
    background-image:
        linear-gradient(rgba(179, 255, 0, 0.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(179, 255, 0, 0.25) 1px, transparent 1px) !important;
}

/* Force the wrapper width to match the 1200px terminal card layout */
body.gsyncd-core-careers-page .contact-form-wrapper {
    max-width: 1200px !important;
    width: 100% !important;
}

/* Mobile responsive padding adjustments */
@media screen and (max-width: 600px) {
    body.gsyncd-core-careers-page #sliding-form-container {
        padding: 20px 15px !important;
    }
}
