/* ------------------------------
   General Page Styling
------------------------------ */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;

    background:#f5f7fb;

    color:#333;

    display:flex;
    flex-direction:column;
    align-items:stretch;

    padding:0 0 34px;

    font-size:0.9rem;

}

/* Header */

.site-header{
    width:100%;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 30px;

    background:white;
    border-bottom:1px solid #e5e7eb;

    box-sizing:border-box;
}

.header-left{

    display:flex;
    align-items:center;
    gap:38px;

}

/* Clean Finance Logo */

/* Modern Data Logo */

/* Friendly Explorer Logo */

/* Friendly Explorer Logo */

/* Friendly Explorer Logo */

.site-title{

    font-family:Arial, Helvetica, sans-serif;

    font-size:1.45rem;
    font-weight:500;

    letter-spacing:-0.7px;

    cursor:pointer;

}

.company-word{

    font-weight:500;
    color:#333;

}

.trends-word{
    font-weight:700;
    color:#2563eb;
    position:relative;
}

.header-page-title{

    font-size:1rem;
    color:#555;

}

.header-right{

    display:flex;
    align-items:center;
    gap:8px;

}

.header-button{

    border:none;
    background:transparent;

    padding:8px 12px;

    border-radius:8px;

    font-size:0.9rem;
    color:#666;

    cursor:pointer;

    transition:
        background-color .15s,
        color .15s;

}

.header-button:hover{

    background:#f1f3f5;
    color:#222;

}

/* Main Content */

.container{

    margin-top:12px;
    width:100%;
    max-width:850px;
    margin-left:auto;
    margin-right:auto;

    text-align:center;

}

/* Title */

h1{

    font-size:2.6rem;

    color:#1a73e8;

    margin-bottom:16px;

}

/* Subtitle */

.subtitle{

    color:#666;

    font-size:1.1rem;

    margin-bottom:24px;

}

#companySelector{

    display:flex;

    gap:13px;

    align-items:stretch;

}

/* Search Bar */

input{

    width:100%;
    max-width:425px;

    padding:15px 20px;

    font-size:0.9rem;

    border:none;

    border-radius:30px;

    background:white;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    outline:none;

}

/* Add Comparison Card */

.company-search{

    height:48px;
    width:100%;
    min-width:0;

    padding:14px 14px;

    font-size:0.9rem;
    font-weight:200;

    color:#555;

    background:#e8eaed;

    border:2px solid transparent;
    border-radius:7px;

    box-shadow:none;

    outline:none;

    cursor:text;

    transition:0.2s;
}

.company-search:hover{

    background:#dfe1e5;

}

.company-search:focus{

    background:white;

    border-color:#1a73e8;

}

.edit-search-results{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:100%;
    background:white;
    border-radius:10px;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    z-index:1000;
}

.company-chip{
    position:relative;
}

.company-chip.editing{
    overflow:visible;
}

.edit-search-wrapper{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:100;
}

.edit-search-box{
    width:100%;
    height:100%;
    box-sizing:border-box;
}

/* Button Area */

.button-group{

    display:flex;

    background:#eceff3;

    padding:4px;

    border-radius:10px;

    overflow:hidden;

    box-shadow:inset 0 1px 2px rgba(0,0,0,.05);

}

/* Buttons */

button{

    padding:5px 10px;

    border:none;

    border-radius:10px;

    background:transparent;

    color:#666;

    font-size:0.9rem;

    cursor:pointer;

    transition:
        background-color .2s,
        color .2s,
        box-shadow .2s,
        transform .15s;

}

.filters{

    width:100%;
    max-width:850px;

    display:flex;

    align-items:center;

    gap:20px;

    padding:12px 20px;

    margin:0 auto 12px;

    background:white;

    border-radius:17px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

button:active{

    transform:scale(.98);

}

/* Active Button */

.active{

    background:white;

    color:#222;

    font-weight:600;

    box-shadow:0 2px 6px rgba(0,0,0,.08);

}

.clear-all-button {

    padding: 8px 16px;

    border: none;
    border-radius: 10px;

    background: #eceff3;
    color: #666;

    font-size: 0.9rem;
    cursor: pointer;

    transition:
        background-color .2s,
        color .2s,
        box-shadow .2s,
        transform .15s;

}

.clear-all-button:hover {

    background: #e2e5e9;
    color: #222;

}

.clear-all-button:active {

    transform: scale(.98);

}

/* Graph Container */

.graph-container{

    background:white;

    border-radius:17px;

    padding:26px;

    height:425px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

}

/* Placeholder */

.graph-placeholder{

    height:272px;

    border:2px dashed #c8d6f0;

    border-radius:13px;

    display:flex;
    justify-content:center;
    align-items:center;

    color:#8c96a8;

    font-size:1.1rem;

}

.graph-area{

    position:relative;

}

.recommendation-panel{

    position:absolute;

    left:calc(100% + 11px);

    top:0;

    width:250px;

    height:100%;

    background:white;

    border-radius:17px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    padding:20px;

}

.recommendation-title{

    font-size:1rem;

    font-weight:600;

    color:#222;

    margin-bottom:7px;

}

.recommendation-subtitle{

    color:#777;

    line-height:1.4;

    margin-bottom:7px;

}

.comparison-title{

    font-size:0.9rem;

    font-weight:600;

    color:#222;

}

.vs-text{

    color:#999;

    font-weight:500;

    margin:0 4px;

}

.comparison-teaser{

    margin-top:5px;

    color:#666;

    font-size:.85rem;

    line-height:1.2;

}

.comparison-item{

    padding:12px 0;

    cursor:pointer;

    transition:.2s;

    border-bottom:1px solid #eceff3;


}

.comparison-item:hover{

    background:#f5f7fb;

}

.suggestion-item{

    display:flex;

    align-items:center;

    gap:9px;

    padding:12px 0;

    border-bottom:1px solid #eceff3;

    cursor:pointer;

    transition:.2s;

}

.suggestion-item:hover{

    background:#f5f7fb;

}

.suggestion-plus{

    width:20px;

    height:20px;

    border-radius:50%;

    background:#eceff3;

    color:#555;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:600;

    flex-shrink:0;

}

.suggestion-name{

    font-weight:500;

    color:#222;

}

/* ------------------------------
   Mobile Design
------------------------------ */

@media(max-width:700px){

    h1{

        font-size:2.2rem;

    }

    .button-group{

        flex-direction:column;
        align-items:center;

    }

    button{

        width:220px;

    }

    .graph-container{

        padding:20px;

    }

}

/* Search Suggestions */

#searchResults{

    display:none;

    position:absolute;

    top:calc(100% + 8px);

    left:0;

    width:100%;

    max-width:none;

    background:white;

    border-radius:7px;

    box-shadow:0 4px 12px rgba(0,0,0,.08);

    padding:6px;

    z-index:100;

}

.search-wrapper{

    position:relative;

    width:100%;

    height:48px;

}

/* Search / Comparison Cards Section */

.search-section{

    width:100%;
    max-width:850px;

    display:grid;

    grid-template-columns:repeat(5, 1fr);

    gap:8px;

    margin:0 auto 12px;

    position:relative;

}

/* Individual Search Result */

.search-result{

    padding:10px 15px;

    margin:7px;

    border-radius:10px;

    cursor:pointer;

    text-align:left;

    transition:0.2s;

}

.search-result:hover{

    background:#e8f0fe;

}

/* Selected Companies */

#selectedCompanies{

    display:contents;

}

/* Selected Company Chip */

.company-chip{

    background:#e8eaed;
    
    color:#333;

    padding:9px 13px;

    border-radius:7px;

    font-weight:200;
    
    height:48px;

    display:flex;

    align-items:center;

    gap:8px;

    width:100%;

    justify-content:space-between;

    transition:
        transform .15s,
        opacity .15s,
        box-shadow .15s;

}

.company-chip:hover{
    background:#dfe2e5;
}

.company-chip:active{

    cursor:grabbing;

}

.chip-actions{
    display:flex;
    align-items:center;
    gap:4px;

    margin-left:auto;
}

.grab-handle{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#999;
    font-size:16px;

    cursor:grab;
    user-select:none;

    padding:3px;
    margin-left:3px;

    border-radius:5px;
}

.grab-handle:hover{
    color:#555;
    background:#f0f0f0;
}

.grab-handle:active{
    cursor:grabbing;
}

.dragging{

    opacity:.75;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

.drag-over{

    transform:translateY(-2px);

    box-shadow:0 6px 14px rgba(0,0,0,.12);

}

.company-info{

    display:flex;

    align-items:center;

    gap:8px;

    flex:1;
}

.company-info span{
    text-align:left;
}

.company-color-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    flex-shrink:0;

}

.remove-button{

    cursor:pointer;

    font-weight:bold;

    transition:0.2s;

}

.remove-button:hover{

    color:#333;

}

.graph-wrapper{

    position:relative;

    width:100%;

    height:100%;

}

#emptyGraphMessage{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#777;

    background:white;

}

.empty-icon{

    font-size:2.6rem;

    margin-bottom:24px;

}

#emptyGraphMessage h2{

    color:#333;

    margin-bottom:7px;

}

.search-result:hover{

    background:#e8f0fe;

}

/* Search Results Heading */

#searchResultsTitle{

    padding:9px 14px 5px 14px;

    font-size:0.8rem;

    font-weight:600;

    color:#777;

    letter-spacing:.5px;

}

/* Company Name */

.search-name{

    font-weight:600;

    color:#222;

}

/* Subtitle */

.search-subtitle{

    margin-top:4px;

    font-size:0.8rem;

    color:#777;

}

.search-result.active{

    background:#e8f0fe;

}

.year-filter{

    display:flex !important;

    align-items:center !important;

    gap:14px !important;

    flex:1 !important;

    max-width:357px !important;

    margin-left:auto !important;

}

#startYearLabel,
#endYearLabel{

    font-size:.8rem !important;

    font-weight:600 !important;

    color:#666 !important;

    min-width:34px !important;

    text-align:center !important;

}

#yearSlider{

    flex:1 !important;

    margin:0 !important;

}


/* Entire Slider Track */

.noUi-target{

    border:none !important;

    box-shadow:none !important;

    height:6px !important;

    border-radius:10px !important;

    background:#e6e6e6 !important;

}

/* Selected Range */

.noUi-connect{

    background:#4285F4 !important;

}

/* Handles */

.noUi-handle{

    width:18px !important;

    height:18px !important;

    right:-10px !important;

    top:-6.5px !important;

    border-radius:50% !important;

    border:3px solid #4285F4 !important;

    background:white !important;

    box-shadow:0 2px 8px rgba(0,0,0,.15) !important;

    cursor:pointer !important;

}

/* Remove little handle lines */

.noUi-handle::before,
.noUi-handle::after{

    display:none !important;

}