@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Special+Elite&display=swap');

/* --- Page Canvas & Vignette Background --- */
.patient-dossier-wrapper {
    width: 100%;
    min-height: 100vh;
    padding: 2.5rem 1rem;
    background: radial-gradient(circle at 50% 30%, #1c1c1c 0%, #0a0a0a 100%);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

/* --- Archival Institutional Parchment --- */
.patient-record-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    background-color: #f2ebd9;
    background-image: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.45) 0%, rgba(206, 190, 160, 0.65) 100%), repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(160, 140, 110, 0.08) 28px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 20px 45px rgba(0, 0, 0, 0.85), inset 0 0 55px rgba(139, 105, 60, 0.25);
    border: 1px solid #c2b59b;
    border-radius: 2px;
    padding: 2.5rem 2.75rem;
    color: #222;
    font-family: 'Courier Prime', 'Special Elite', 'Courier New', monospace;
    box-sizing: border-box;
}

/* --- Rubber Stamped Header Decal --- */
.intake-stamp {
    position: absolute;
    top: 32px;
    right: 40px;
    font-size: 1.25rem;
    font-weight: 900;
    color: rgba(168, 28, 20, 0.65);
    border: 3px double rgba(168, 28, 20, 0.65);
    padding: 3px 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transform: rotate(-12deg);
    pointer-events: none;
    user-select: none;
    z-index: 5;
}

/* --- Institutional Header --- */
.dossier-header {
    border-bottom: 2px solid #5a3d31;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

    .dossier-header h1 {
        margin: 0;
        font-size: 1.85rem;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        font-weight: 700;
        color: #2b1f1a;
    }

    .dossier-header p {
        margin: 0.35rem 0 0;
        font-size: 0.85rem;
        color: #4a453e;
        letter-spacing: 1.2px;
        text-transform: uppercase;
    }

/* --- Party Photos Dispatch Banner Container --- */
.event-dispatch-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(90, 61, 49, 0.08);
    border: 1px dashed #5a3d31;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    gap: 1.25rem;
    box-sizing: border-box;
}

    .event-dispatch-banner .banner-text {
        flex: 1 1 auto;
    }

    .event-dispatch-banner strong {
        color: #8a1c14;
        text-transform: uppercase;
        font-size: 0.85rem;
        letter-spacing: 1px;
        display: block;
        margin-bottom: 4px;
    }

    .event-dispatch-banner p {
        margin: 0;
        font-size: 0.8rem;
        color: #444;
        line-height: 1.4;
    }

/* --- Layout Grid (Data vs Photo Slot) --- */
.dossier-body-grid {
    display: grid;
    grid-template-columns: 1fr 230px;
    gap: 2.25rem;
    margin-bottom: 1.75rem;
}

/* --- Vintage Mugshot Display --- */
.patient-photo-card {
    position: relative;
    background: #fff;
    padding: 10px 10px 22px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 0 2px rgba(0, 0, 0, 0.2);
    border: 1px solid #dcd3be;
    transform: rotate(2deg);
    text-align: center;
    transition: transform 0.2s ease-in-out;
}

    .patient-photo-card:hover {
        transform: rotate(0deg) scale(1.02);
    }

    /* Trompe l'oeil Paperclip Accent */
    .patient-photo-card::before {
        content: "";
        position: absolute;
        top: -16px;
        right: 32px;
        width: 12px;
        height: 40px;
        border: 3px solid #707070;
        border-radius: 6px;
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
        z-index: 10;
    }

.patient-photo-frame {
    width: 100%;
    height: 215px;
    background: #252525;
    border: 1px solid #888;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

    .patient-photo-frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: sepia(20%) contrast(105%);
    }

.photo-placeholder-text {
    color: #999;
    font-size: 0.78rem;
    padding: 1rem;
    text-transform: uppercase;
    line-height: 1.4;
    text-align: center;
}

.photo-caption {
    font-size: 0.75rem;
    margin-top: 8px;
    color: #555;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.btn-upload-trigger {
    display: block;
    margin-top: 10px;
    width: 100%;
    background: #4a3429;
    color: #f7f3e8;
    border: none;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 0.78rem;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 1px;
    touch-action: manipulation;
}

    .btn-upload-trigger:hover,
    .btn-upload-trigger:active {
        background: #6a493a;
    }

/* --- Clinical Dossier Data Fields --- */
.meta-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    border-bottom: 1px dashed #998a72;
    padding-bottom: 0.5rem;
}

    .meta-row .case-tag {
        color: #8a1c14;
        font-size: 1.25rem;
        font-weight: 700;
    }

.field-label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #555;
    font-weight: bold;
    margin-bottom: 2px;
}

.field-value {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

    .field-value.diagnosis {
        color: #8a1c14;
    }

.clinical-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.subgrid-card {
    background: rgba(0, 0, 0, 0.03);
    padding: 0.85rem;
    border-left: 3px solid #5a3d31;
}

.patient-observations-box {
    background: #ede3c8;
    padding: 1rem 1.25rem;
    border: 1px solid #ccbc9d;
    border-left: 5px solid #8a1c14;
    margin-bottom: 1.5rem;
}

    .patient-observations-box .obs-title {
        color: #8a1c14;
        font-weight: bold;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: block;
        margin-bottom: 0.25rem;
    }

    .patient-observations-box .obs-quote {
        font-size: 1.05rem;
        font-style: italic;
        color: #2b1f1a;
    }

.dossier-footer {
    border-top: 1px dashed #998a72;
    padding-top: 0.85rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #777;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Archive Destination Radio Selection --- */
.gallery-options-box {
    margin: 1.25rem 0;
    background: rgba(0, 0, 0, 0.03);
    padding: 0.85rem 1rem;
    border: 1px solid #d4c8b0;
}

.gallery-radio-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.65rem;
    cursor: pointer;
    font-size: 0.88rem;
    user-select: none;
}

    .gallery-radio-item:last-child {
        margin-bottom: 0;
    }

    .gallery-radio-item input[type="radio"] {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        accent-color: #8a1c14;
        cursor: pointer;
    }

/* --- Buttons & Action Links --- */
.btn-dossier {
    display: inline-block;
    padding: 0.65rem 1.25rem;
    font-family: inherit;
    font-size: 0.85rem;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid #5a3d31;
    letter-spacing: 1px;
    background: transparent;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    touch-action: manipulation;
    box-sizing: border-box;
}

    .btn-dossier.primary {
        background: #8a1c14;
        color: #fff;
        border-color: #550f09;
    }

        .btn-dossier.primary:hover,
        .btn-dossier.primary:active {
            background: #6a130c;
            color: #fff;
        }

    .btn-dossier:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

/* --- Modal Overlays --- */
.upload-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.upload-modal {
    background: #f7f3e8;
    border: 2px solid #5a3d31;
    padding: 1.5rem;
    max-width: 520px;
    width: 100%;
    font-family: 'Courier Prime', monospace;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

    .upload-modal h3 {
        margin: 0 0 0.5rem 0;
        text-transform: uppercase;
        color: #8a1c14;
        font-size: 1.25rem;
        letter-spacing: 1px;
        border-bottom: 1px dashed #5a3d31;
        padding-bottom: 0.5rem;
    }

.modal-desc {
    font-size: 0.8rem;
    color: #555;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* --- Optimization Status Banner --- */
.status-banner {
    display: none;
    padding: 10px 14px;
    background: #fff8dc;
    border-left: 4px solid #8a1c14;
    font-size: 0.82rem;
    color: #8a1c14;
    margin-bottom: 1rem;
    font-weight: bold;
}

/* --- FilePond Asylum Skinning --- */
.filepond--root {
    font-family: 'Courier Prime', Courier, monospace !important;
    margin-bottom: 0.5rem;
}

.filepond--panel-root {
    background-color: #ede5cf !important;
    border: 2px dashed #5a3d31 !important;
    border-radius: 0 !important;
}

.filepond--drop-label {
    min-height: 5.5em !important;
    color: #5a3d31 !important;
    font-size: 0.88rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    cursor: pointer;
}

.filepond--label-action {
    text-decoration: underline;
    font-weight: bold;
    color: #8a1c14;
}

.filepond--item-panel {
    background-color: #4a3429 !important;
}

.filepond--file-info-main {
    font-family: inherit !important;
}

/* --- Mobile Viewport Adjustments --- */
@media (max-width: 768px) {
    .patient-record-container {
        padding: 1.75rem 1.25rem;
    }

    .event-dispatch-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

        .event-dispatch-banner .btn-dossier {
            text-align: center;
        }

    .dossier-body-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .patient-photo-sidebar {
        order: -1;
    }

    .patient-photo-card {
        max-width: 220px;
        margin: 0 auto;
    }

    .intake-stamp {
        right: 15px;
        top: 20px;
        font-size: 1rem;
        padding: 2px 8px;
    }

    .clinical-subgrid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .modal-actions {
        flex-direction: column-reverse;
    }

        .modal-actions .btn-dossier {
            width: 100%;
            text-align: center;
            padding: 0.8rem;
        }
}

/* =========================================
   Asylum Responsive Navbar & Hamburger Menu
   ========================================= */

.asylum-navbar {
    background: #151110;
    border: 1px solid #3b2a27;
    border-top: 2px solid #731e1e;
    border-bottom: 2px solid #4a1515;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    position: relative;
    z-index: 1050;
    font-family: 'Courier New', Courier, monospace;
}

.asylum-nav-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asylum-nav-brand {
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #e5a93c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-crest {
    color: #8c2a2a;
    font-size: 16px;
}

/* Links (Desktop Default) */
.asylum-nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.asylum-nav-link {
    display: inline-flex;
    align-items: center;
    background: #1f1917;
    border: 1px solid #42342f;
    color: #c9bea9;
    padding: 7px 14px;
    font-size: 11px;
    letter-spacing: 1.5px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.2s ease;
}

    .asylum-nav-link .bullet {
        color: #731e1e;
        margin-right: 6px;
        font-size: 9px;
    }

    .asylum-nav-link:hover {
        background: #2b1414;
        border-color: #8c2a2a;
        color: #ffffff;
        text-decoration: none;
    }

    .asylum-nav-link.active {
        background: #731e1e;
        border-color: #9c2828;
        color: #f7eee2;
    }

        .asylum-nav-link.active .bullet {
            color: #e5a93c;
        }

    .asylum-nav-link.upload-link {
        border-color: #2e5934;
        color: #82c98a;
    }

        .asylum-nav-link.upload-link:hover {
            background: #1e3b22;
            color: #ffffff;
        }

/* Hamburger Trigger Button */
.asylum-hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 38px;
    height: 36px;
    background: #1f1917;
    border: 1px solid #4a3832;
    border-radius: 3px;
    padding: 8px;
    cursor: pointer;
}

    .asylum-hamburger-btn .bar {
        width: 100%;
        height: 2px;
        background-color: #d6cfc7;
        transition: all 0.25s ease;
    }

/* Mobile Media Query (< 768px) */
@media (max-width: 767.98px) {
    .asylum-hamburger-btn {
        display: flex;
    }

    /* Off-canvas slide-out drawer */
    .asylum-nav-links {
        position: fixed;
        top: 0;
        right: -280px;
        width: 270px;
        height: 100vh;
        background: #14100f;
        border-left: 2px solid #5a1a1a;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.95);
        flex-direction: column;
        align-items: stretch;
        padding: 70px 20px 20px 20px;
        gap: 12px;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1060;
    }

        .asylum-nav-links.open {
            right: 0;
        }

    .asylum-nav-link {
        padding: 12px 16px;
        font-size: 13px;
        width: 100%;
    }

    /* Transform burger to 'X' */
    .asylum-hamburger-btn.open .top-bar {
        transform: translateY(6px) rotate(45deg);
    }

    .asylum-hamburger-btn.open .mid-bar {
        opacity: 0;
    }

    .asylum-hamburger-btn.open .bot-bar {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Backdrop */
    .asylum-nav-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        z-index: 1055;
    }

        .asylum-nav-backdrop.open {
            display: block;
        }
}

/* ===================================================
   Dossier Layout & Embedded Paper Navigation
   =================================================== */

body {
    background-color: #0b0908;
    color: #2b2520;
    font-family: 'Courier New', Courier, monospace;
    padding-bottom: 40px;
    margin: 0;
}

.asylum-top-strip {
    font-size: 11px;
    letter-spacing: 3px;
    color: #73685f;
    background: #070505;
    border-bottom: 1px solid #231c18;
    padding: 8px 0;
    text-align: center;
}

.dossier-paper {
    background: #ede4d3;
    max-width: 980px;
    margin: 25px auto;
    padding: 35px 45px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.9), inset 0 0 80px rgba(130, 95, 60, 0.2);
    border: 1px solid #c2b59f;
    border-radius: 3px;
    position: relative;
}

.asylum-inner-navbar {
    background: #1e1816;
    border: 1px solid #4a3832;
    border-left: 4px solid #731e1e;
    padding: 6px 12px;
    margin-top: 15px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.asylum-inner-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.asylum-inner-btn {
    background: #2b221f;
    border: 1px solid #4a3832;
    color: #cfc4b6;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 6px 14px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
}

    .asylum-inner-btn:hover,
    .asylum-inner-btn.active {
        background: #731e1e;
        color: #ffffff;
        border-color: #9c2828;
        text-decoration: none;
    }

    .asylum-inner-btn.deposit-btn {
        border-color: #3d6e44;
        color: #9dd4a3;
    }

        .asylum-inner-btn.deposit-btn:hover {
            background: #25522b;
            color: #ffffff;
        }

.asylum-inner-hamburger {
    display: none;
    background: #2b221f;
    border: 1px solid #4a3832;
    color: #d6cfc7;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
    letter-spacing: 1.5px;
    font-weight: bold;
}

.asylum-solid-rule {
    border: none;
    border-top: 2px solid #2b221f;
    opacity: 1;
    margin: 12px 0 20px 0;
}

@media (max-width: 767.98px) {
    .dossier-paper {
        padding: 20px 15px;
        margin: 10px auto;
    }

    .asylum-inner-hamburger {
        display: block;
        width: 100%;
        text-align: left;
    }

    .asylum-inner-nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 8px;
        gap: 5px;
    }

        .asylum-inner-nav-links.show {
            display: flex;
        }

    .asylum-inner-navbar {
        flex-direction: column;
        align-items: stretch;
    }

    .asylum-inner-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 10px;
    }
}