:root {
    --accent: #6d4aff;
    --accent-soft: rgba(109, 74, 255, 0.1);
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Sidebar nav - always physically pinned to the right edge, regardless of
   page direction (dir=ltr/rtl toggles with the language switcher, but the
   sidebar's own position should not flip - hence physical `right`/`margin-right`
   instead of logical inset-inline-* here). */
.app-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 240px;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(160deg, #1f1c2e, #3a2f5c);
    overflow-y: auto;
    z-index: 1030;
}

.app-main-wrapper {
    margin-right: 240px;
}

.app-sidebar .navbar-brand,
.app-sidebar .navbar-brand span {
    color: #fff;
}

.brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.1rem;
}

.app-sidebar .brand-icon {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Login page */
.login-body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #1f1c2e, #3a2f5c);
    padding: 1rem;
}

.login-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.lang-btn.active {
    background: #fff;
    color: #1f1c2e;
}

.app-sidebar-nav .nav-link {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.95rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.5rem;
}

.app-sidebar-nav .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.app-sidebar-nav .nav-link.active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.history-item.active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

@media (max-width: 767.98px) {
    .app-main-wrapper {
        margin-right: 0;
    }
}

/* Mobile top bar (hamburger trigger) - the fixed right rail above is hidden below md.
   direction:ltr keeps brand-left/hamburger-right physically fixed regardless of page
   language, same reasoning as the desktop sidebar's physical (not logical) right pin. */
.app-mobile-topbar {
    padding: 0.85rem 1.25rem;
    background: linear-gradient(160deg, #1f1c2e, #3a2f5c);
    position: sticky;
    top: 0;
    z-index: 1030;
    direction: ltr;
}

.app-mobile-topbar .navbar-brand,
.app-mobile-topbar .navbar-brand span {
    color: #fff;
}

.app-hamburger-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
}

.app-hamburger-btn:hover,
.app-hamburger-btn:focus {
    color: rgba(255, 255, 255, 0.8);
}

.app-mobile-offcanvas {
    background: linear-gradient(160deg, #1f1c2e, #3a2f5c);
    color: #fff;
}

/* Force the drawer to always slide in from the physical right, under the hamburger button,
   regardless of page language - Bootstrap's RTL stylesheet otherwise mirrors offcanvas-end
   to the left, which would open on the opposite side from the trigger in Hebrew. */
.app-mobile-offcanvas.offcanvas-end {
    right: 0 !important;
    left: auto !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 0;
    transform: translateX(100%);
}

.app-mobile-offcanvas .navbar-brand,
.app-mobile-offcanvas .navbar-brand span {
    color: #fff;
}

.card {
    border-radius: 0.9rem;
}

/* Analyze page hero + CTA */
.analyze-hero {
    padding: 2rem 1rem 2.25rem;
}

.analyze-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1.6rem;
}

.analyze-hero-cta {
    background: linear-gradient(135deg, var(--accent), #9b7dff);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2.5rem;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: 0 8px 24px rgba(109, 74, 255, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.analyze-hero-cta:hover,
.analyze-hero-cta:focus {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(109, 74, 255, 0.45);
    color: #fff;
}

.analyze-hero-cta:active {
    transform: translateY(0);
}

@keyframes photo-tile-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--accent-soft);
    }
    50% {
        box-shadow: 0 0 0 10px var(--accent-soft);
    }
}

.photo-tile-pulse {
    animation: photo-tile-pulse 0.7s ease-in-out 2;
    border-color: var(--accent) !important;
}

/* Photo upload tiles */
.photo-tile {
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    background: var(--bs-tertiary-bg);
    border: 1.5px dashed var(--bs-border-color);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.photo-tile:hover {
    border-color: var(--accent);
}

.photo-tile.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.photo-tile-label {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    position: relative;
}

.photo-tile-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.photo-tile-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--bs-secondary-color);
    font-size: 0.8rem;
    font-weight: 500;
}

.photo-tile-empty i {
    font-size: 1.3rem;
}

.photo-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.photo-tile-remove {
    position: absolute;
    top: 0.35rem;
    inset-inline-end: 0.35rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
    z-index: 2;
}

.photo-tile-remove:hover {
    background: rgba(0, 0, 0, 0.8);
}

.photo-tile-zoom {
    position: absolute;
    bottom: 0.35rem;
    inset-inline-end: 0.35rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
    z-index: 2;
}

.photo-tile-zoom:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Prompt preview */
.prompt-block {
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.78rem;
}

.prompt-block--full {
    max-height: none;
    font-size: 0.85rem;
}

/* Results */
.empty-state {
    border: 1.5px dashed var(--bs-border-color);
    border-radius: 0.9rem;
    background: var(--bs-tertiary-bg);
}

.observation-block {
    margin: 0;
    padding: 0.65rem 0.9rem;
    border-inline-start: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0.5rem;
    font-size: 0.85rem;
}

.result-row {
    padding: 0.85rem 0;
}

.result-row + .result-row {
    border-top: 1px solid var(--bs-border-color);
}

.info-icon {
    cursor: help;
    font-size: 0.8rem;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    /* Longer values (white-hair signs/local-percentage lists, technical history) squeeze
       against the label in a side-by-side flex row on narrow screens - stack instead. */
    .result-row > .flex-grow-1 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.15rem;
    }
}

/* Groups a set of related fields (currently just white hair) into one visually bounded
   block, in both the results display and the manual-entry form. */
.field-group {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0 0.75rem;
}

.field-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

.field-group .result-row:first-of-type {
    padding-top: 0.15rem;
}

.field-group .result-row:last-of-type {
    padding-bottom: 0.15rem;
}

.manual-compare-note {
    color: var(--bs-secondary-color);
    font-weight: 400;
}

.manual-compare-note i {
    margin-inline-end: 0.25rem;
}

.result-row .metric-icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.5rem;
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

/* Attached photos shown in results + PDF export */
.report-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
}

.report-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.report-photo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.65rem;
    text-align: center;
    padding: 0.15rem 0;
}

.report-photo-clickable {
    cursor: pointer;
}

.report-photo-zoom {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
    font-size: 1.4rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.report-photo-clickable:hover .report-photo-zoom {
    opacity: 1;
}

#image-lightbox .modal-content {
    box-shadow: none;
}

#image-lightbox-img {
    max-height: 85vh;
    width: auto;
    margin: 0 auto;
    display: block;
}

/* PDF export (browser print-to-PDF) */
@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        background: #fff;
    }

    .app-main-wrapper {
        margin-right: 0;
    }

    .col-lg-7 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}