/* =========================================
   MASTER LAYOUT
   ========================================= */
#tt-master-container {
    width: 100%;
    max-width: 950px;
    margin: 0 auto;
    padding: 20px; /* Matches PokéBinder exactly */
    box-sizing: border-box;
}

/* Ambient Background Light for Glassmorphism */
#tt-master-container::before {
    content: ""; position: fixed; top: -10vh; left: -10vw; width: 120vw; height: 120vh;
    background: radial-gradient(800px circle at 50% 50%, rgba(155, 89, 182, 0.15), rgba(255, 121, 198, 0.05) 40%, transparent 70%);
    z-index: -1; pointer-events: none; animation: orbBreathe 18s ease-in-out infinite alternate;
}
@keyframes orbBreathe {
    0% { transform: scale(1) translate(0px, 0px); opacity: 0.5; }
    50% { transform: scale(1.4) translate(40px, -50px); opacity: 1; }
    100% { transform: scale(1.1) translate(-60px, 40px); opacity: 0.5; }
}

/* =========================================
   CORE UI ANIMATIONS & TOOLTIPS
   ========================================= */
.tube-tooltip { position: relative; cursor: help; }
.tube-tooltip .tooltip-text {
    visibility: hidden; width: 280px; background-color: var(--color); color: var(--background); text-align: left;
    border-radius: 8px; padding: 12px; position: absolute; z-index: 10; bottom: 125%; left: 50%;
    margin-left: -140px; opacity: 0; transition: all 0.3s ease; font-size: 0.85rem; line-height: 1.5;
    font-weight: normal; box-shadow: 0 10px 25px rgba(0,0,0,0.15); pointer-events: none;
}
.tube-tooltip .tooltip-text::after {
    content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
    border-width: 5px; border-style: solid; border-color: var(--color) transparent transparent transparent;
}
.tube-tooltip:hover .tooltip-text { visibility: visible; opacity: 1; transform: translateY(-5px); }

/* =========================================
   CARDS & GLASSMORPHISM
   ========================================= */
.tt-card {
    background: rgba(30, 30, 35, 0.65); /* Translucent dark base */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); 
    transition: all 0.3s ease;
}

.tt-sticky-header {
    position: sticky; 
    top: 1rem; 
    z-index: 100; 
    /* Slightly more opaque so scrolling text doesn't bleed through completely */
    background: rgba(22, 22, 26, 0.85); 
    backdrop-filter: blur(24px); 
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

/* =========================================
   BUTTONS & INPUTS
   ========================================= */
.tt-btn {
    display: flex; align-items: center; justify-content: center; 
    padding: 8px 16px; border: none; cursor: pointer; 
    font-weight: bold; font-size: 0.95rem; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    outline: none; margin: 0; border-radius: 8px;
}
.tt-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
.tt-btn:active { transform: translateY(0); box-shadow: none; }

.tt-btn-primary { background: var(--accent); color: #fff !important; }
.tt-btn-outline { background: transparent; color: var(--color); border: 2px solid transparent; }

#test-search { transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-radius: 12px; }
#test-search:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 8px 25px rgba(233, 30, 99, 0.15); transform: translateY(-2px); }

.test-tag { transition: all 0.2s ease; cursor: default; }
.test-tag:hover { transform: scale(1.05) translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3); }

/* =========================================
   DOM ANIMATIONS
   ========================================= */
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes slideFadeIn { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.animate-tag { animation: popIn 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-row { opacity: 0; animation: slideFadeIn 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards; }

/* =========================================
   EMERGENCY NIGHT SHIFT THEME
   ========================================= */
.theme-night-shift {
    --color: #f8f8f2 !important;
    --border-color: rgba(255,255,255,0.05) !important;
    --accent: #ff79c6 !important; /* Cyberpunk pink */
}

/* OLED Dark Glass */
.theme-night-shift .tt-card { 
    background: rgba(5, 5, 8, 0.75) !important; 
    border-color: rgba(255, 255, 255, 0.03) !important; 
}

.theme-night-shift .tt-sticky-header { 
    background: rgba(0, 0, 0, 0.85) !important; 
}

/* =========================================
   MOBILE RESPONSIVENESS
   ========================================= */
@media (max-width: 768px) {
    /* 1. Tighten up the card padding */
    .tt-card {
        padding: 1.2rem 1rem !important;
    }

    /* 2. Flush the sticky header to the absolute top of the phone screen */
    .tt-sticky-header {
        top: 0;
        margin-top: 0 !important;
        border-radius: 0 0 16px 16px; 
        border-top: none;
    }

    /* 3. Scale down the massive volume tracker text and its sub-elements safely */
    #total-volume-text {
        font-size: 2.2rem !important; /* Down from 2.8rem to prevent wrapping */
    }
    #total-volume-text span {
        font-size: 1.2rem !important; /* Scales down the 'mL' text */
    }
    #total-volume-text div {
        font-size: 0.85rem !important; /* Scales down the red "Exceeds Capillary Limit" warning */
    }
    
    /* 4. Adjust the critical alert boxes to fit narrow screens */
    #critical-alerts div {
        padding: 10px !important;
        font-size: 0.85rem !important; /* Drops from 1rem to fit longer strings */
    }
    
    /* 5. Adjust the title sizes */
    h2#results-title {
        font-size: 1.6rem !important;
    }
    
    /* 6. Stack the patient type buttons if they get too tight */
    .tt-btn {
        font-size: 0.85rem !important;
        padding: 8px 12px !important;
    }
}

/* =========================================
   PRINT MEDIA QUERY
   ========================================= */
@media print {
    .print-hide, header, footer, nav { display: none !important; }
    .print-only { display: block !important; }
    body, html { background: #FFF !important; color: #000 !important; }
    * { box-shadow: none !important; }
    #print-header { display: block !important; }
    #results-title { text-align: left !important; font-size: 1.4rem !important; margin-bottom: 10px !important; border-bottom: 2px solid #000 !important; padding-bottom: 5px !important; }
    #results-list { margin: 0 !important; padding: 0 !important; }
    #results-list li { break-inside: avoid; border: none !important; border-bottom: 1px solid #ccc !important; margin: 0 !important; padding: 12px 0 !important; background: transparent !important; border-radius: 0 !important; display: flex !important; }
    .study-cover { display: none !important; }
    .study-content { display: flex !important; }
    .tube-name-print { border-bottom: none !important; color: #000 !important; }
    .theme-night-shift { --background: #FFF !important; --color: #000 !important; } /* Force white print even if night mode is on */
}

/* =========================================
   TUBE GRAPHICS (Decoupled Components)
   ========================================= */
.tt-tube-wrapper {
    margin-right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.tt-tube-cap {
    width: 24px;
    height: 12px;
    background: var(--cap-color, #333);
    border-radius: 4px 4px 0 0;
    border: 1px solid rgba(0,0,0,0.3);
    border-bottom: none;
    position: relative;
    z-index: 2;
}

.tt-tube-body {
    width: 20px;
    height: var(--tube-height, 52px);
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(0,0,0,0.2);
    border-top: none;
    border-radius: 0 0 12px 12px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tt-tube-blood {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--blood-height, 30px);
    background: linear-gradient(90deg, #600000 0%, #a00000 50%, #400000 100%);
    opacity: 0.95;
}