/* ==========================================================
   DASHBOARD NAVIGATION
   ==========================================================
   Modern dropdown navigation and early nav/icon refinements.
*/

/* v2.7.9 modern dashboard navigation with dropdown subsections */
.qd-top-nav-nested{
    align-items:center!important;
    justify-content:center!important;
    border-radius:999px!important;
    gap:8px!important;
    padding:9px!important;
    background:rgba(255,255,255,.9)!important;
    border:1px solid rgba(148,163,184,.28)!important;
    box-shadow:0 14px 34px rgba(15,23,42,.08)!important;
}
.qd-nav-group{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.qd-top-nav .qd-nav-main{
    min-width:0!important;
    gap:6px;
    background:transparent!important;
    border:1px solid transparent;
    transition:background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.qd-top-nav .qd-nav-main:hover,
.qd-nav-group:hover > .qd-nav-main,
.qd-nav-group:focus-within > .qd-nav-main{
    background:#eef6ff!important;
    color:#075985!important;
    border-color:rgba(14,165,233,.18)!important;
    box-shadow:0 8px 18px rgba(14,165,233,.12)!important;
}
.qd-nav-caret{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    line-height:1;
    margin-top:-1px;
    opacity:.7;
    transition:transform .18s ease;
}
.qd-nav-group:hover .qd-nav-caret,
.qd-nav-group:focus-within .qd-nav-caret{
    transform:rotate(180deg);
}
.qd-sub-nav{
    position:absolute;
    left:50%;
    top:calc(100% + 10px);
    z-index:30;
    min-width:168px;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:8px;
    border-radius:16px;
    background:rgba(255,255,255,.98)!important;
    border:1px solid rgba(148,163,184,.24);
    box-shadow:0 18px 40px rgba(15,23,42,.14);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,-6px) scale(.98);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.qd-sub-nav:before{
    content:"";
    position:absolute;
    left:50%;
    top:-6px;
    width:10px;
    height:10px;
    background:#fff;
    border-left:1px solid rgba(148,163,184,.24);
    border-top:1px solid rgba(148,163,184,.24);
    transform:translateX(-50%) rotate(45deg);
}
.qd-nav-group:hover .qd-sub-nav,
.qd-nav-group:focus-within .qd-sub-nav{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0) scale(1);
    pointer-events:auto;
}
.qd-sub-nav a{
    justify-content:flex-start!important;
    width:100%;
    background:transparent!important;
    padding:8px 10px!important;
    border-radius:11px!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:800!important;
    color:#475569!important;
    box-shadow:none!important;
    white-space:nowrap;
}
.qd-sub-nav a:hover,
.qd-sub-nav a:focus{
    background:#f1f5f9!important;
    color:#0f172a!important;
}
#qd-ig-at-glance,
#qd-ig-growth,
#qd-ig-posts,
#qd-ig-hashtags,
#qd-fb-at-glance,
#qd-fb-posts,
#qd-website-at-glance,
#qd-website-chart,
#qd-website-top-pages{
    scroll-margin-top:105px;
}
.qd-website-section .qd-top-pages{
    margin-top:0!important;
}
@media (max-width: 760px){
    .qd-top-nav-nested{
        border-radius:24px!important;
        align-items:center!important;
        gap:8px!important;
    }
    .qd-nav-group{position:relative;}
    .qd-sub-nav{
        left:50%;
        min-width:156px;
    }
    .qd-top-nav .qd-nav-main{font-size:12px!important; padding:8px 10px!important;}
}



/* v2.8.0 IG/FB card icons, thumbnail overlays, and sort direction */
.qd-card > span{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
}
.qd-card .qd-stat-title-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    margin:0!important;
    color:inherit!important;
    font-size:14px!important;
    line-height:1!important;
    text-transform:none!important;
    letter-spacing:0!important;
    opacity:.82;
}
.qd-media-thumb{
    position:relative!important;
}
.qd-media-overlay-icon{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:44px;
    height:44px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,23,42,.46);
    color:#fff;
    backdrop-filter:blur(2px);
    box-shadow:0 10px 24px rgba(15,23,42,.18);
    pointer-events:none;
}
.qd-media-overlay-icon svg{
    width:26px;
    height:26px;
    display:block;
    fill:currentColor;
}
.qd-media-overlay-carousel{
    border-radius:14px;
}
.qd-media-overlay-carousel svg{
    width:28px;
    height:28px;
}
.qd-media-overlay-carousel rect{
    fill:none;
    stroke:currentColor;
    stroke-width:3.2;
}
.qd-media-toolbar{
    gap:9px!important;
}
.qd-sort-direction{
    width:42px;
    height:38px;
    border:1px solid rgba(148,163,184,.55);
    border-radius:12px;
    background:#fff;
    color:#334155;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
    transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.qd-sort-direction:hover{
    transform:translateY(-1px);
    background:#f8fafc;
    color:#0f172a;
    box-shadow:0 8px 18px rgba(15,23,42,.07);
}
.qd-sort-direction-icon{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    font-weight:900;
    line-height:1;
}
.qd-sort-lines{
    font-size:16px;
    transform:scaleX(1.05);
    opacity:.72;
}
.qd-sort-arrow{
    position:absolute;
    right:-2px;
    bottom:-2px;
    font-size:16px;
    color:#0ea5e9;
    text-shadow:0 1px 0 #fff;
}
@media(max-width:640px){
    .qd-media-toolbar{
        justify-content:center!important;
        flex-wrap:wrap!important;
    }
}


/* v2.8.2 cleaner sorting labels and modern stable dropdown menu */
.qd-top-nav-nested{
    gap:12px!important;
    padding:12px!important;
    border-radius:30px!important;
    overflow:visible!important;
}
.qd-nav-group{
    position:relative!important;
    padding-bottom:18px!important;
    margin-bottom:-18px!important;
}
.qd-nav-group:after{
    content:"";
    position:absolute;
    left:-14px;
    right:-14px;
    top:100%;
    height:22px;
    display:block;
}
.qd-top-nav .qd-nav-main{
    min-width:126px!important;
    min-height:54px!important;
    padding:11px 17px!important;
    border-radius:20px!important;
    font-size:14px!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    box-shadow:0 10px 22px rgba(15,23,42,.07)!important;
}
.qd-top-nav .qd-has-dropdown{
    flex-direction:column!important;
    gap:2px!important;
    line-height:1.05!important;
}
.qd-nav-caret{
    display:block!important;
    width:100%!important;
    margin:2px 0 0 0!important;
    font-size:12px!important;
    opacity:.42!important;
    text-align:center!important;
    color:currentColor!important;
}
.qd-top-nav-nested > .qd-nav-group:nth-child(1) > .qd-nav-main{
    color:#c13584!important;
    background:linear-gradient(135deg, rgba(253,244,255,.96), rgba(255,247,237,.96))!important;
    border-color:rgba(193,53,132,.16)!important;
}
.qd-top-nav-nested > .qd-nav-group:nth-child(2) > .qd-nav-main{
    color:#1877f2!important;
    background:linear-gradient(135deg, rgba(239,246,255,.96), rgba(240,249,255,.96))!important;
    border-color:rgba(24,119,242,.16)!important;
}
.qd-top-nav-nested > a.qd-nav-main:nth-child(3){
    color:#16a34a!important;
    background:linear-gradient(135deg, rgba(240,253,244,.96), rgba(236,253,245,.96))!important;
    border-color:rgba(22,163,74,.16)!important;
}
.qd-top-nav-nested > .qd-nav-group:nth-child(4) > .qd-nav-main{
    color:#7c3aed!important;
    background:linear-gradient(135deg, rgba(245,243,255,.96), rgba(250,245,255,.96))!important;
    border-color:rgba(124,58,237,.16)!important;
}
.qd-top-nav-nested > a.qd-nav-main:nth-child(5){
    color:#0f766e!important;
    background:linear-gradient(135deg, rgba(240,253,250,.96), rgba(236,254,255,.96))!important;
    border-color:rgba(15,118,110,.16)!important;
}
.qd-top-nav .qd-nav-main:hover,
.qd-nav-group:hover > .qd-nav-main,
.qd-nav-group:focus-within > .qd-nav-main{
    transform:translateY(-1px)!important;
    filter:saturate(1.06)!important;
    box-shadow:0 14px 28px rgba(15,23,42,.12)!important;
}
.qd-sub-nav{
    top:calc(100% + 2px)!important;
    min-width:190px!important;
    padding:10px!important;
    border-radius:18px!important;
    transform:translate(-50%,-3px) scale(.985)!important;
}
.qd-sub-nav:before{
    display:none!important;
    content:none!important;
}
.qd-nav-group:hover .qd-sub-nav,
.qd-nav-group:focus-within .qd-sub-nav{
    transform:translate(-50%,0) scale(1)!important;
}
.qd-sub-nav a{
    font-size:13px!important;
    padding:10px 12px!important;
    border-radius:12px!important;
}
.qd-media-toolbar label,
.qd-media-toolbar select,
.qd-media-toolbar select option{
    font-family:Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif!important;
}
@media (max-width: 900px){
    .qd-top-nav .qd-nav-main{
        min-width:112px!important;
        font-size:13px!important;
        padding:10px 13px!important;
    }
}
@media (max-width: 760px){
    .qd-nav-group{
        padding-bottom:0!important;
        margin-bottom:0!important;
    }
    .qd-nav-group:after{display:none!important;}
    .qd-top-nav .qd-nav-main{
        min-width:0!important;
        min-height:46px!important;
        font-size:12px!important;
        padding:9px 11px!important;
    }
}