/*
 * AdjustIQ custom theme
 *
 * This stylesheet creates a futuristic, dark‑themed interface with neon
 * accents.  It uses glassmorphism panels to set content apart from the
 * gradient background.  All text sizes and colors have been tuned for
 * readability.
 */

body {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    /* Deep navy to black gradient for a sophisticated, modern look */
    background: linear-gradient(145deg, #01080f 0%, #021526 40%, #062e54 100%);
    color: #e0f0ff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    animation: fadeInPage 0.6s ease forwards;
}

/* Page fade-in animation */
@keyframes fadeInPage {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Navigation bar */
.navbar {
    padding: 20px;
    background: transparent;
    color: #00aaff;
    font-size: 1.6rem;
    letter-spacing: 2px;
    transform: translateY(-100%);
    animation: slideDown 0.8s ease forwards;
}
.navbar .logo {
    font-weight: 700;
    text-transform: uppercase;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/* Card and panel rise-up animation */
@keyframes riseUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page container */
.container {
    width: 90%;
    max-width: 800px;
    margin: 0 auto;
    flex: 1;
}

/* Hero section */
.hero {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}
.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 10px;
}
.hero p {
    font-size: 1.1rem;
    color: #b0c4de;
}

/* Upload form */
.upload-form {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: riseUp 0.8s ease forwards;
    opacity: 0;
    /* Center form in content area */
    margin: 0 auto;
    max-width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.upload-form .error {
    color: #ff6b6b;
    margin-bottom: 15px;
}
.file-label {
    display: block;
    cursor: pointer;
    margin-bottom: 20px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}
.file-label-text {
    display: inline-block;
    padding: 12px 24px;
    background: #00aaff;
    color: #01080f;
    border-radius: 6px;
    transition: background 0.3s ease, transform 0.2s ease;
}
.file-label:hover .file-label-text {
    background: #0088cc;
    transform: translateY(-2px);
}
.file-label input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.submit-btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background: #0066cc;
    border: none;
    border-radius: 6px;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s ease, transform 0.2s ease;
}
 .submit-btn:hover {
    background: #0088cc;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: scale(0.97);
}
.note {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #9faec8;
}

/* Ensure upload form submit button has fixed width and doesn’t shrink on processing */
.upload-form .submit-btn {
    min-width: 200px;
    width: auto;
}

/* Result card */
.result-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 30px;
    margin-top: 60px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: riseUp 0.8s ease forwards;
    opacity: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 800px;
}
.result-card h2 {
    margin-top: 0;
    margin-bottom: 15px;
}
.result-card pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: monospace;
    line-height: 1.5;
    color: #d0dcec;
}
.back-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 24px;
    background: #0066cc;
    color: #ffffff;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Hover and active states for back button */
.back-btn:hover {
    background: #0088cc;
    transform: translateY(-2px);
}

.back-btn:active {
    transform: scale(0.97);
}

/* Ingested files section */
.ingested-files {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
}
.file-preview {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    width: 180px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.file-preview img {
    max-width: 160px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 5px;
}
.back-btn:hover {
    background: #00cfff;
}

/* Footer */
.footer {
    text-align: center;
    padding: 20px;
    font-size: 0.8rem;
    color: #5b748a;
}

/* Home actions container (start new claim / view history) */
.home-actions {
    margin-top: 30px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}
.home-actions .home-btn {
    flex: 1 1 160px;
    max-width: 200px;
}

/* Dashboard metrics on home page */
.dashboard-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin: 30px auto;
    max-width: 1000px;
}
.metric-card {
    flex: 1 1 200px;
    max-width: 220px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: center;
    animation: riseUp 0.8s ease forwards;
    opacity: 0;
}
.metric-card h3 {
    margin: 0 0 8px 0;
    color: #00aaff;
    font-size: 1rem;
}
.metric-card p {
    margin: 0;
    font-size: 1.5rem;
    color: #e0f0ff;
}

/* Summary card styling */
.summary-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: riseUp 0.8s ease forwards;
    opacity: 0;
}
.summary-card h2 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #00aaff;
    font-size: 1.5rem;
}
.summary-card p, .summary-card .value-text {
    color: #d0dcec;
    font-size: 1rem;
    line-height: 1.4;
}

/* Nested JSON rendering styles */
.nested-map {
    margin-left: 12px;
}

/* ----------------------------------------------------------------------- */
/* Scroll reveal animations for the landing page
 *
 * Elements with the .animate-on-scroll class will be hidden (opacity 0
 * and translated down) until they enter the viewport.  When they
 * intersect with the viewport (via IntersectionObserver), the
 * .visible class is added, triggering a smooth fade and upward
 * movement.  This creates a dynamic effect as users scroll through
 * the landing page.  Adjust the translateY and duration for desired
 * motion.
 */
/*
  Generic scroll reveal animations.  Elements start hidden with a
  translation defined via the --start-transform CSS variable.  When
  the `.visible` class is added, they fade in and slide back to
  their resting position.  You can customise the initial movement
  direction on a per‑element basis by setting the CSS variable
  `--start-transform` in JavaScript or inline styles (e.g.
  translateY(40px), translateX(-40px), translateX(40px)).  If no
  variable is provided, the default is a 40px downward shift.
*/
.animate-on-scroll {
    opacity: 0;
    /* Use CSS custom property for initial translation.  If not set,
       default to translating downwards. */
    transform: var(--start-transform, translateY(40px));
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-on-scroll.visible {
    opacity: 1;
    /* Reset the transform to its original position */
    transform: translate(0, 0);
}
.sub-section {
    margin-bottom: 8px;
}
.sub-title {
    color: #00aaff;
    font-weight: 600;
}
.sub-content {
    margin-left: 12px;
    margin-top: 2px;
}
.list-section {
    margin-left: 20px;
    padding-left: 0;
    list-style-type: disc;
}
.list-section li {
    margin-bottom: 4px;
}
.value-text {
    color: #d0dcec;
}

/* Print styling: hide navigation and decorative elements and provide a clean, readable report */
@media print {
    /* Reset background and colors for readability */
    body {
        background: #ffffff;
        color: #000000;
        display: block; /* Override flex for printing */
    }
    /* Hide sidebar, mobile header and footer */
    .sidebar,
    .mobile-header,
    .footer,
    .loading-overlay {
        display: none !important;
    }
    /* Hide action buttons (including print button) */
    .action-buttons,
    .file-scroll {
        display: none !important;
    }
    /* Expand content to full width and allow content to flow across pages */
    .dashboard {
        display: block;
    }
    .content-wrapper,
    .result-container {
        padding: 0;
        margin: 0;
        width: 100%;
        box-shadow: none;
        background: #ffffff;
        overflow: visible;
    }
    .analysis-cards {
        margin-top: 0;
    }
    /* Simplify card styling for print */
    .analysis-card {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-bottom: 1rem;
        page-break-inside: avoid;
    }
    .analysis-card h3 {
        color: #000000;
        margin-top: 0;
        font-size: 1.2rem;
    }
    .analysis-card .value-text,
    .analysis-card .sub-title,
    .analysis-card .sub-content,
    .analysis-card .list-section li {
        color: #000000;
    }
    .analysis-card .sub-section {
        margin-bottom: 6px;
    }
    .summary-card {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0;
        margin-top: 0;
        margin-bottom: 1rem;
    }
    .summary-card h2 {
        color: #000000;
        font-size: 1.4rem;
        margin-top: 0;
    }
    .summary-card p,
    .summary-card .value-text {
        color: #000000;
    }
    .metric-card,
    .dashboard-metrics,
    .home-actions {
        display: none !important;
    }
}

/* Action buttons container on result page */
.action-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Ensure buttons inside action group size to content */
.action-buttons .submit-btn,
.action-buttons .back-btn {
    width: auto;
}

/* Claim ID styling */
.claim-id {
    font-size: 0.85rem;
    color: #7a8dad;
    margin-top: 15px;
    text-align: center;
}

/* Claim date styling */
.claim-date {
    font-size: 0.85rem;
    color: #7a8dad;
    margin-bottom: 15px;
    text-align: center;
}

/* Home page styling */
.home-hero {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}
.home-hero h1 {
    font-size: 2.4rem;
    margin-bottom: 10px;
}
.home-hero p {
    font-size: 1.1rem;
    color: #9faec8;
    margin-bottom: 20px;
}

/* ----------------------------------------------------------------------- */
/* Landing page styling */

/* Overall layout for the public landing page.  It reuses the same dark
   gradient from the application to create a cohesive brand experience. */
.landing-body {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(145deg, #01080f 0%, #021526 40%, #062e54 100%);
    color: #e0f0ff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    animation: fadeInPage 0.6s ease forwards;
}

/* Sticky header on landing page with logo and login button */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    z-index: 1000;
    background: rgba(2, 5, 15, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo styling consistent with dashboard */
.landing-logo {
    font-size: 1.8rem;
    letter-spacing: 2px;
    font-weight: 700;
    display: flex;
    align-items: center;
}

/* Login button in header */
.landing-nav .login-btn {
    background: #0066cc;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.3s ease, transform 0.2s ease;
    /* Provide spacing from the right edge of the page */
    /* Shift the button slightly left by adding right margin */
    margin-right: 40px;
}
.landing-nav .login-btn:hover {
    background: #0088cc;
    transform: translateY(-2px);
}
.landing-nav .login-btn:active {
    transform: scale(0.97);
}

/* Main content area on landing page */
.landing-main {
    margin-top: 100px; /* offset for fixed header */
    /* Use full width so that alternating background sections span the
       entire viewport.  Remove horizontal padding here to allow
       section backgrounds to start at the very left edge.  Section
       content padding is handled within each section for a neat
       margin. */
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    flex: 1;
}

/* Hero section styling */
.landing-hero {
    text-align: center;
    margin-bottom: 60px;
}
.landing-hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #00aaff;
}
.landing-hero .hero-sub {
    font-size: 1.2rem;
    color: #b0c4de;
    margin-bottom: 10px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.landing-hero .hero-tagline {
    font-size: 1.1rem;
    color: #9faec8;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
.cta-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1rem;
    color: #ffffff;
    background: #0066cc;
    transition: background 0.3s ease, transform 0.2s ease;
}
.cta-btn:hover {
    background: #0088cc;
    transform: translateY(-2px);
}
.cta-btn:active {
    transform: scale(0.97);
}
.cta-btn.secondary {
    background: #ff0077;
    color: #ffffff;
}
.cta-btn.secondary:hover {
    background: #e6006e;
}

/* Description and other text sections */
/*
 * Content sections on the public landing page.  To ensure the alternating
 * background shading spans the full viewport width, these sections
 * occupy 100% of the available width.  Instead of centering via
 * margin:auto, we apply left and right padding so the text remains
 * comfortably inset from the edges.  This prevents the backgrounds
 * from appearing as narrow stripes and creates clean, full‑width
 * colour bands.
 */
.landing-description,
.landing-problem,
.landing-solution,
.landing-deliver,
.landing-enterprise,
.landing-integration,
.landing-usecases,
.landing-how,
.landing-why,
.landing-cta {
    margin-bottom: 60px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* Provide side margins with padding rather than centering via auto margins */
    padding-left: 5%;
    padding-right: 5%;
}
.landing-description p {
    text-align: center;
    font-size: 1.1rem;
    color: #c0d4e6;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Section headings */
.landing-problem h2,
.landing-solution h2,
.landing-deliver h2,
.landing-enterprise h2,
.landing-integration h2,
.landing-usecases h2,
.landing-how h2,
.landing-why h2,
.landing-cta h2 {
    text-align: center;
    font-size: 1.8rem;
    color: #00aaff;
    margin-bottom: 20px;
}

/* Problem list styling */
.landing-problem ul,
.landing-enterprise ul,
.landing-integration ul,
.landing-usecases ul,
.landing-why ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.landing-problem li,
.landing-enterprise li,
.landing-integration li,
.landing-usecases li,
.landing-why li {
    position: relative;
    padding-left: 28px;
    color: #c0d4e6;
    font-size: 1rem;
    line-height: 1.4;
}
.landing-problem li::before,
.landing-enterprise li::before,
.landing-integration li::before,
.landing-usecases li::before,
.landing-why li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2rem;
    color: #00aaff;
}

/* Solution items grid */
.solution-items,
.deliver-items,
.how-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
.solution-item,
.deliver-item,
.how-step {
    flex: 1 1 180px;
    max-width: 220px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.3s ease;
}
.solution-item:hover,
.deliver-item:hover,
.how-step:hover {
    transform: translateY(-4px);
}
.solution-item i,
.deliver-item i,
.how-step h3 {
    font-size: 1.8rem;
    color: #00aaff;
    margin-bottom: 10px;
}
.solution-item p,
.deliver-item p,
.how-step p {
    font-size: 0.9rem;
    color: #d0dcec;
    line-height: 1.4;
}
.deliver-item h3 {
    color: #00aaff;
    font-size: 1.2rem;
    margin-bottom: 8px;
}
.how-step h3 {
    margin-top: 0;
    color: #00aaff;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

/* CTA section at bottom */
.landing-cta {
    text-align: center;
}
.landing-cta p {
    font-size: 1rem;
    color: #c0d4e6;
    margin-bottom: 20px;
}

/* Footer for landing page */
.landing-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
    color: #5b748a;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 40px;
}

/* Responsive adjustments for landing page */
@media (max-width: 768px) {
    .landing-header {
        padding: 15px 20px;
    }
    .landing-hero h1 {
        font-size: 2.2rem;
    }
    .landing-hero .hero-sub,
    .landing-hero .hero-tagline {
        font-size: 1rem;
    }
    .cta-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    .solution-item,
    .deliver-item,
    .how-step {
        flex: 1 1 140px;
        max-width: 180px;
        padding: 16px;
    }
    .landing-main {
        width: 95%;
    }
}

/* History table styling */
.history-table-wrapper {
    overflow-x: auto;
    margin-top: 20px;
}
.history-table {
    width: 100%;
    border-collapse: collapse;
    color: #d0dcec;
    font-size: 0.9rem;
}
.history-table th,
.history-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.history-table th {
    background: rgba(255, 255, 255, 0.05);
    color: #00aaff;
    font-weight: 600;
    text-align: left;
}
.history-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}
.history-table a.submit-btn {
    width: auto;
    padding: 6px 12px;
    font-size: 0.85rem;
}
.history-page h2 {
    margin-top: 0;
}

/* Profile page styling */
.profile-page {
    max-width: 600px;
    margin: 60px auto;
    text-align: center;
}
.profile-page h2 {
    margin-bottom: 15px;
}
.profile-page p {
    color: #9faec8;
}

/* File scroll container on result and claim detail pages */
.file-scroll {
    display: flex;
    overflow-x: auto;
    gap: 15px;
    padding: 10px 0;
    margin-bottom: 20px;
    scrollbar-width: thin;
    scrollbar-color: #00aaff transparent;
}
.file-scroll::-webkit-scrollbar {
    height: 6px;
}
.file-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.file-scroll::-webkit-scrollbar-thumb {
    background-color: #00aaff;
    border-radius: 3px;
}

.file-item {
    flex: 0 0 auto;
    width: 180px;
    height: 120px;
    position: relative;
}
.file-item img,
.file-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pdf-item,
.other-item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    transition: background 0.3s ease, transform 0.2s ease;
}
.pdf-item:hover,
.other-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}
.pdf-item i {
    font-size: 1.5rem;
    color: #00aaff;
    margin-bottom: 5px;
}
.pdf-item span,
.other-item span {
    font-size: 0.8rem;
    color: #d0dcec;
}

/* Analysis cards container */
.analysis-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.analysis-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: riseUp 0.8s ease forwards;
    opacity: 0;
}
.analysis-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #00aaff;
    font-size: 1.2rem;
}
.analysis-card p,
.analysis-card pre {
    color: #d0dcec;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.4;
    font-size: 0.95rem;
}

/* Result container header styling */
.result-container h2 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #00aaff;
    font-size: 1.8rem;
}
.result-container .claim-id,
.result-container .claim-date {
    font-size: 0.85rem;
    color: #7a8dad;
    margin-top: 10px;
    margin-bottom: 0;
}

/* PDF modal overlay */
.pdf-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.pdf-modal.active {
    display: flex;
}
.pdf-modal embed,
.pdf-modal iframe {
    width: 80%;
    height: 80%;
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
.pdf-modal .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 1.8rem;
    color: #ffffff;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 2100;
}
.pdf-modal .close-btn:hover {
    color: #00aaff;
}

/* Login page styling */
.login-page {
    margin: 0;
    padding: 0;
    font-family: 'Orbitron', sans-serif;
    /* Inherit gradient background from body */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Use column layout for better centering */
    flex-direction: column;
    min-height: 100vh;
}
.login-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-align: center;
    width: 360px;
    margin: 0 auto;
}

/* Ensure the form occupies full container width on login page */
.login-container form {
    width: 100%;
}

/* Ensure the passcode input and submit button in the login form have
   identical widths and align perfectly.  Explicitly setting width
   prevents inherited styles from upload forms or other contexts from
   affecting their size. */
.login-container .passcode-input,
.login-container .submit-btn {
    width: 100%;
    box-sizing: border-box;
}
.login-container h2 {
    margin-top: 0;
    margin-bottom: 20px;
}
.passcode-input {
    width: 100%;
    padding: 12px 16px;
    margin-bottom: 20px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #e0f0ff;
    font-size: 1rem;
    outline: none;
}
.passcode-input::placeholder {
    color: #9faec8;
}

/* Dashboard layout */
.dashboard {
    display: flex;
    height: 100vh;
}

/* Sidebar styling */
.sidebar {
    width: 240px;
    background: rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
}
.sidebar-header {
    padding: 20px;
    font-size: 1.6rem;
    color: #00aaff;
    text-align: center;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.side-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: #b0c4de;
    text-decoration: none;
    font-size: 1rem;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.nav-item i {
    color: #00aaff;
    min-width: 20px;
    text-align: center;
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    transform: translateX(4px);
}
.nav-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-right: 3px solid #00aaff;
}
.nav-item.active i {
    color: #00aaff;
}

/* Brand styling: differentiate "Adjuster" and "IQ" */
.brand-main {
    color: #00aaff;
}
.brand-suffix {
    color: #ff0077;
}

/* Main content area */
.content-wrapper {
    flex: 1;
    padding: 40px;
    overflow-y: auto;
}


/* Loading overlay and spinner */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 5, 15, 0.9);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.loading-overlay.active {
    display: flex;
}
.spinner {
    border: 6px solid rgba(255, 255, 255, 0.15);
    border-top: 6px solid #00aaff;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.2s linear infinite;
}
/* Dynamic loading bar for futuristic overlay */
.loading-bar {
    margin-top: 20px;
    width: 200px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    position: relative;
}
.loading-bar::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 50%;
    background: linear-gradient(90deg, #00aaff, #ff0077);
    left: -50%;
    animation: loadingBar 1.5s linear infinite;
}
@keyframes loadingBar {
    0% {
        left: -50%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Happy face loader components */
.loading-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Eyes row container for the happy loader */
.loading-face .eyes {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* Eye styling – small rotating arcs */
.eye {
    border: 4px solid rgba(255, 255, 255, 0.15);
    border-top-color: #00aaff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin: 0 12px;
}
.left-eye {
    animation: spin 1s linear infinite;
}
.right-eye {
    animation: spinReverse 1s linear infinite;
}

/* Mouth styling – angled smiling bar with moving gradient */
.mouth {
    margin-top: 0;
    width: 180px;
    height: 40px;
    /* Draw an upward smile using only the bottom border.  The top and sides
       are transparent, while the bottom border has color.  The large
       border radius creates a curved arc. */
    border-style: solid;
    border-width: 0 0 6px 0;
    border-color: transparent transparent #00aaff transparent;
    border-radius: 0 0 100px 100px;
    background: transparent;
}

/* Remove the gradient animation from the smile as it no longer uses
   a straight bar.  The mouthSlide keyframes remain defined for
   potential reuse but are not applied. */

@keyframes mouthSlide {
    0% {
        left: -50%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

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

/* Responsive adjustments: collapse sidebar on small screens */
@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: -240px;
        height: 100%;
        transition: left 0.3s ease;
        z-index: 1100;
        /* Increase the opacity of the background on mobile to improve
           contrast and prevent complete transparency.  This dark,
           translucent backdrop helps the navigation stand out when
           overlaying page content. */
        background: rgba(2, 5, 15, 0.9);
        /* Offset the sidebar content below the mobile header so the
           brand name is not obscured by the header bar.  Adjust this
           value if you change the mobile header height. */
        padding-top: 60px;
    }
    .sidebar.open {
        left: 0;
    }
    .mobile-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1500;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 10px 20px;
        background: rgba(2, 5, 15, 0.8);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    /* Position the sidebar toggle in the top-right corner */
    .mobile-header i#sidebarToggle {
        font-size: 1.8rem;
        color: #00aaff;
        cursor: pointer;
        margin-left: auto;
        padding: 6px;
        /* Increase hit area and visibility on mobile */
    }
    /* Position the mobile title on the left side when visible */
    .mobile-header .mobile-title {
        position: absolute;
        left: 20px;
        font-size: 1.2rem;
        color: #00aaff;
        letter-spacing: 2px;
        display: none; /* JS toggles this based on sidebar state */
    }
    .content-wrapper {
        padding: 80px 20px 20px 20px; /* add top padding equal to header height */
    }
    .file-scroll .file-item {
        width: 140px;
        height: 90px;
    }
    .dashboard-metrics {
        flex-direction: column;
        align-items: center;
    }
    .dashboard-metrics .metric-card {
        width: 100%;
        max-width: 320px;
    }
    .home-actions {
        flex-direction: column;
        align-items: center;
    }
    .home-actions .home-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ----------------------------------------------------------------------- */
/* Additional landing page components */

/* Hero layout splits text and animation side by side */
.landing-hero-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
.landing-hero-text {
    flex: 1 1 300px;
    min-width: 280px;
}
.landing-hero-animation {
    flex: 1 1 300px;
    min-width: 280px;
    position: relative;
    height: 300px;
}

/* Animated orbs for hero graphic */
.landing-hero-animation .orb {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-origin: 0 0;
    pointer-events: none;
    filter: blur(0.5px);
}
.landing-hero-animation .orb1 {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #00aaff 0%, rgba(0, 170, 255, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 12px rgba(0, 170, 255, 0.8);
    animation: orbit1 18s linear infinite;
}
.landing-hero-animation .orb2 {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #ff0077 0%, rgba(255, 0, 119, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 0, 119, 0.8);
    animation: orbit2 12s linear infinite;
}
.landing-hero-animation .orb3 {
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #00ffcc 0%, rgba(0, 255, 204, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 14px rgba(0, 255, 204, 0.8);
    animation: orbit3 22s linear infinite;
}
.landing-hero-animation .orb4 {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #ffaa00 0%, rgba(255, 170, 0, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.8);
    animation: orbit4 16s linear infinite;
}
.landing-hero-animation .orb5 {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #aa00ff 0%, rgba(170, 0, 255, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 8px rgba(170, 0, 255, 0.8);
    animation: orbit5 26s linear infinite;
}

/* Additional orbs to create a total of ten rotating dots.  Each orb has
   its own size, colour, orbit radius and animation speed. */
.landing-hero-animation .orb6 {
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, #00ff7f 0%, rgba(0, 255, 127, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 12px rgba(0, 255, 127, 0.8);
    animation: orbit6 20s linear infinite;
}
.landing-hero-animation .orb7 {
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #7f00ff 0%, rgba(127, 0, 255, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 12px rgba(127, 0, 255, 0.8);
    animation: orbit7 22s linear infinite;
}
.landing-hero-animation .orb8 {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #ff66cc 0%, rgba(255, 102, 204, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(255, 102, 204, 0.8);
    animation: orbit8 14s linear infinite;
}
.landing-hero-animation .orb9 {
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #66ff99 0%, rgba(102, 255, 153, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 14px rgba(102, 255, 153, 0.8);
    animation: orbit9 26s linear infinite;
}
.landing-hero-animation .orb10 {
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #66ccff 0%, rgba(102, 204, 255, 0.4) 60%, transparent 100%);
    box-shadow: 0 0 10px rgba(102, 204, 255, 0.8);
    animation: orbit10 18s linear infinite;
}

@keyframes orbit1 {
    from {
        transform: rotate(0deg) translateX(140px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(140px) rotate(-360deg);
    }
}
@keyframes orbit2 {
    from {
        transform: rotate(0deg) translateX(90px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(90px) rotate(-360deg);
    }
}
@keyframes orbit3 {
    from {
        transform: rotate(0deg) translateX(170px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(170px) rotate(-360deg);
    }
}
@keyframes orbit4 {
    from {
        transform: rotate(0deg) translateX(110px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(110px) rotate(-360deg);
    }
}
@keyframes orbit5 {
    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}

/* Keyframes for additional orbs */
@keyframes orbit6 {
    from {
        transform: rotate(0deg) translateX(150px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(150px) rotate(-360deg);
    }
}
@keyframes orbit7 {
    from {
        transform: rotate(0deg) translateX(180px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(180px) rotate(-360deg);
    }
}
@keyframes orbit8 {
    from {
        transform: rotate(0deg) translateX(130px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(130px) rotate(-360deg);
    }
}
@keyframes orbit9 {
    from {
        transform: rotate(0deg) translateX(200px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(200px) rotate(-360deg);
    }
}
@keyframes orbit10 {
    from {
        transform: rotate(0deg) translateX(160px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(160px) rotate(-360deg);
    }
}

/* Introduction cards */
.intro-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    /* Center the entire intro card group within its section.  Without
       auto margins, the group can appear anchored to one side when
       its intrinsic width is less than the section width (e.g., on
       mobile). */
    margin-left: auto;
    margin-right: auto;
}
.intro-card {
    flex: 1 1 280px;
    max-width: 500px;
    /* Slightly brighter glass panel for better contrast */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #d0dcec;
    line-height: 1.5;
    font-size: 1rem;
}

/* Style headings within intro cards to emphasise the content purpose */
.intro-card h3 {
    font-size: 1.4rem;
    margin-top: 0;
    margin-bottom: 12px;
    color: #00aaff;
}

/* Problem cards */
.problem-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    /* Center the problem card group horizontally */
    margin-left: auto;
    margin-right: auto;
}
.problem-card {
    flex: 1 1 240px;
    max-width: 260px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #d0dcec;
    font-size: 0.95rem;
    line-height: 1.4;
}
.problem-note {
    text-align: center;
    margin-top: 20px;
    color: #c0d4e6;
    font-style: italic;
    font-size: 0.95rem;
}

/* Enterprise, Integration and Use Cases panels */
.enterprise-panels {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    /* Use full width for this section so the alternating background
       colour spans the entire page.  Remove auto margins and
       max-width constraints.  Vertical spacing is handled via
       margin-top and margin-bottom. */
    margin-top: 60px;
    margin-bottom: 60px;
    width: 100%;
}
.info-panel {
    flex: 1 1 300px;
    max-width: 340px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #d0dcec;
}
.info-panel h3 {
    margin-top: 0;
    margin-bottom: 12px;
    color: #00aaff;
    font-size: 1.3rem;
}
.info-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.info-panel li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.3;
    color: #c0d4e6;
}
.info-panel li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    top: 0;
    color: #ff0077;
}

/* Why AdjustIQ cards */
.why-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
    /* Center the why card group horizontally */
    margin-left: auto;
    margin-right: auto;
}
.why-card {
    flex: 1 1 220px;
    max-width: 260px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 26px;
    text-align: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #d0dcec;
}
.why-card i {
    font-size: 2rem;
    color: #ff0077;
    margin-bottom: 10px;
}
.why-card h3 {
    font-size: 1rem;
    color: #00aaff;
    margin-bottom: 0;
    line-height: 1.4;
}

/* Responsive adjustments for new landing sections */
@media (max-width: 768px) {
    .landing-hero-content {
        flex-direction: column;
        align-items: center;
    }
    .landing-hero-animation {
        height: 240px;
        margin-top: 20px;
    }
    .intro-card {
        max-width: 100%;
    }
    .problem-card {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .info-panel {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .why-card {
        max-width: 100%;
        flex: 1 1 100%;
    }

    /* Reduce horizontal padding on landing sections to extend coloured
       backgrounds fully across the viewport on mobile devices while
       keeping content slightly inset. */
    .landing-description,
    .landing-problem,
    .landing-solution,
    .landing-deliver,
    .landing-enterprise,
    .landing-integration,
    .landing-usecases,
    .landing-how,
    .landing-why,
    .landing-cta {
        padding-left: 3%;
        padding-right: 3%;
    }

    /* Expand landing sections to the full viewport width on mobile, so the
       alternating background bands cover the entire screen behind the
       scrollbar.  Using 100vw ensures the coloured backgrounds fill
       behind the scrollbar area as well.  Overflow is hidden on the
       x‑axis to prevent horizontal scrolling. */
    .landing-main,
    .landing-main section {
        width: 100vw;
    }
}

/* ----------------------------------------------------------------------- */
/* Dynamic orbiting dots and alternating section backgrounds */

/* Elements generated by JavaScript for the animated hero.  Each orb
   rotates around the centre of its container using a CSS variable for
   radius.  A separate glow animation pulses the opacity for a shimmering
   effect. */
.dynamic-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-origin: 0 0;
    pointer-events: none;
}

@keyframes dynamicOrbit {
    from {
        transform: rotate(0deg) translateX(var(--radius)) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(var(--radius)) rotate(-360deg);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Alternate the background shading of landing page sections to break up
   monotony.  Each section has top and bottom padding. */
/* Each landing page section spans the full width of the viewport and
   includes generous vertical and horizontal padding.  The horizontal
   padding creates a buffer between the edge of the coloured bands and
   the content, preventing cards and text from touching the edges.
   Vertical padding separates sections and allows the scroll reveal
   animations room to breathe. */
.landing-main section {
    /* Include padding within the width so that adding horizontal
       padding does not cause the sections to overflow beyond 100vw.
       Without border-box, 100vw + padding would produce unwanted
       horizontal scrollbars on mobile devices. */
    box-sizing: border-box;
    padding: 60px 5%;
}
.landing-main section:nth-of-type(odd) {
    /* A slightly darker translucent shade for odd sections to break up
       the long page into distinct bands. Adjust the alpha to taste. */
    background: rgba(255, 255, 255, 0.03);
}
.landing-main section:nth-of-type(even) {
    /* A slightly lighter shade for even sections for contrast with the odd
       sections. This subtle alternation reduces monotony across long
       scrolls. */
    background: rgba(255, 255, 255, 0.07);
}