/*==============================================================
    PHIORO ADMIN NAVIGATION
==============================================================*/

#admin-navbar {

    position:fixed;

    top:0;
    bottom:0;
    left:0;

    z-index:2000;

    display:flex;
    flex-direction:column;
    justify-content:center;

    width:100px;

    padding:16px 10px;

    background:#000;

}


/*==============================================================
    LINKS
==============================================================*/

#admin-navbar a {

    display:flex;
    flex-direction:column;

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

    gap:3px;

    min-height:68px;

    padding:7px 4px;

    color:#fff;

    text-align:center;
    text-decoration:none;

    line-height:1;

    opacity:.68;

}


#admin-navbar a:hover,
#admin-navbar a.active {

    opacity:1;

}

#admin-navbar > .admin-nav-item {
    cursor:grab;
    touch-action:none;
}

#admin-navbar > .admin-nav-item.admin-nav-order-chosen,
#admin-navbar > .admin-nav-item.admin-nav-order-drag {
    cursor:grabbing;
}

#admin-navbar > .admin-nav-order-ghost {
    opacity:.28;
}


/*==============================================================
    ICONS + LABELS
==============================================================*/

#admin-navbar .admin-nav-icon {

    position:relative;
    font-size:1.5rem;
    line-height:1;

}

#admin-navbar .admin-nav-badge {
    position:absolute;
    top:-.55rem;
    right:-.8rem;
    display:grid;
    place-items:center;
    min-width:1.15rem;
    height:1.15rem;
    box-sizing:border-box;
    padding:0 .28rem;
    border:2px solid #000;
    border-radius:999px;
    background:#fff;
    color:#000;
    font:700 .58rem/1 system-ui,sans-serif;
}

#admin-navbar .admin-nav-svg-icon {
    display:block;
    width:1.35em;
    height:1.35em;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}


#admin-navbar .admin-nav-label {

    font-size:.95rem;
    line-height:1.05;

}



/*==============================================================
    SETTINGS MENU
==============================================================*/

#admin-navbar .admin-settings {
    position:relative;
    width:100%;
}

#admin-navbar .admin-settings-toggle {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:100%;
    min-height:68px;
    padding:7px 4px;
    border:0;
    background:transparent;
    color:#fff;
    font:inherit;
    text-align:center;
    line-height:1;
    opacity:.68;
    cursor:pointer;
}

#admin-navbar .admin-settings-toggle:hover,
#admin-navbar .admin-settings-toggle[aria-expanded="true"] {
    opacity:1;
}

#admin-navbar .admin-settings-menu {
    position:absolute;
    left:calc(100% + 10px);
    bottom:0;
    z-index:2100;
    min-width:150px;
    padding:6px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:6px;
    background:var(--phi-admin-toolbar, darkslategrey);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
}

#admin-navbar .admin-settings-menu[hidden] {
    display:none;
}

#admin-navbar .admin-settings-menu a {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    min-height:0;
    padding:9px 10px;
    border-radius:4px;
    white-space:nowrap;
    opacity:1;
}

#admin-navbar .admin-settings-menu a:hover,
#admin-navbar .admin-settings-menu a:focus-visible,
#admin-navbar .admin-options-submenu-toggle:hover,
#admin-navbar .admin-options-submenu-toggle:focus-visible,
#admin-navbar .admin-options-submenu-toggle[aria-expanded="true"],
#admin-navbar .admin-options-submenu-toggle.active {
    background:rgba(255,255,255,.12);
    outline:none;
}

#admin-navbar .admin-settings-menu [data-admin-option-item] {
    cursor:grab;
}

#admin-navbar .admin-settings-menu .admin-options-order-chosen,
#admin-navbar .admin-settings-menu .admin-options-order-drag {
    cursor:grabbing;
}

#admin-navbar .admin-settings-menu .admin-options-order-ghost {
    opacity:.28;
}

#admin-navbar .admin-options-submenu {
    position:relative;
}

#admin-navbar .admin-options-submenu-toggle {
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:8px;
    width:100%;
    padding:9px 10px;
    border:0;
    border-radius:4px;
    background:transparent;
    color:#fff;
    font:inherit;
    text-align:left;
    white-space:nowrap;
    cursor:pointer;
}

#admin-navbar .admin-options-submenu-arrow {
    font-size:1.25rem;
    line-height:.75;
    transition:transform .16s ease;
}

#admin-navbar .admin-options-submenu-toggle[aria-expanded="true"] .admin-options-submenu-arrow {
    transform:rotate(90deg);
}

#admin-navbar .admin-options-submenu-menu {
    position:absolute;
    bottom:-6px;
    left:calc(100% + 8px);
    z-index:2200;
    box-sizing:border-box;
    min-width:178px;
    max-height:110px;
    overflow-y:auto;
    scrollbar-width:thin;
    padding:6px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:6px;
    background:var(--phi-admin-toolbar, darkslategrey);
    box-shadow:0 8px 24px rgba(0,0,0,.28);
}

#admin-navbar .admin-options-submenu-menu[hidden] {
    display:none;
}

#admin-navbar .admin-options-submenu-menu > a {
    min-height:34px;
    box-sizing:border-box;
}

#admin-navbar .admin-options-submenu-menu > a.admin-options-submenu-more-cue {
    -webkit-mask-image:linear-gradient(to bottom, #000 8%, transparent 100%);
    mask-image:linear-gradient(to bottom, #000 8%, transparent 100%);
}

/*==============================================================
    DESKTOP PAGE CLEARANCE
==============================================================*/

body.admin-page {
    padding-top:124px !important;
}

@media(min-width:701px) {

    body.admin-page {

        padding-left:130px !important;

    }

}


/*==============================================================
    MOBILE
==============================================================*/

@media(max-width:700px) {

    body.admin-page {

        --admin-mobile-nav-height:78px;

        padding-bottom:100px !important;

    }


    #admin-navbar {

        top:auto;
        right:0;
        bottom:0;

        flex-direction:row;
        justify-content:space-around;

        width:100%;
        height:78px;

        padding:
            8px
            max(4px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(4px, env(safe-area-inset-left));

    }


    #admin-navbar a {

        flex:1;

        min-width:0;
        min-height:0;

        height:100%;

        padding:5px 2px;

    }


    #admin-navbar .admin-nav-icon {

        font-size:1.25rem;

    }


    #admin-navbar .admin-nav-label {

        font-size:.68rem;

    }

    #admin-navbar .admin-settings {
        flex:1;
        min-width:0;
        height:100%;
    }

    #admin-navbar .admin-settings-toggle {
        height:100%;
        min-height:0;
        padding:5px 2px;
    }

    #admin-navbar .admin-settings-menu {
        right:4px;
        bottom:calc(100% + 8px);
        left:auto;
    }

    #admin-navbar .admin-options-submenu-menu {
        right:calc(100% + 8px);
        bottom:-6px;
        left:auto;
    }

}

@media(max-width:700px) and (display-mode:standalone) {
    body.admin-page {
        --admin-mobile-nav-height:68px;
        padding-bottom:74px !important;
    }

    #admin-navbar {
        height:var(--admin-mobile-nav-height);
        padding-top:4px;
        padding-bottom:max(4px, calc(env(safe-area-inset-bottom) / 3));
    }
}

#admin-navbar {
    background:var(--phi-admin-toolbar, darkslategrey);
}

.admin-public-button {
    position:fixed;
    top:64px;
    left:18px;
    z-index:2001;
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:#000;
    box-shadow:0 1px 3px rgba(255,255,255,.85);
    color:#fff;
    text-decoration:none;
    transition:transform .2s;
}

.admin-public-button:hover,
.admin-public-button:focus-visible {
    transform:scale(1.08);
}

.admin-public-button:focus-visible {
    outline:2px solid #fff;
    outline-offset:3px;
}

.admin-public-button img {
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.admin-public-button-label {
    display:none;
}

.admin-header-gallery-controls {
    position:fixed;
    top:64px;
    right:18px;
    z-index:2001;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    height:40px;
    gap:3px;
    margin:0;
    color:var(--phi-admin-text, #fff);
    font-size:60%;
    font-weight:700;
    line-height:1;
}

.admin-header-category-picker {
    position:relative;
    margin:0;
    font:inherit;
}

.admin-header-category-picker summary {
    position:relative;
    padding:.1rem 1.2rem .1rem .38rem;
    border:1px solid currentColor;
    border-radius:2px;
    background:#000;
    color:#fff;
    font:inherit;
    line-height:1;
    cursor:pointer;
    list-style:none;
    text-transform:uppercase;
    white-space:nowrap;
}

.admin-header-category-picker summary::-webkit-details-marker {
    display:none;
}

.admin-header-category-picker summary::after {
    content:"▾";
    position:absolute;
    top:50%;
    right:.35rem;
    transform:translateY(-50%);
    font-family:Arial,sans-serif;
    font-size:.65em;
}

.admin-header-category-menu {
    position:absolute;
    top:100%;
    right:0;
    z-index:2200;
    min-width:100%;
    max-height:min(60vh, 430px);
    overflow-y:auto;
    border:1px solid currentColor;
    background:#000;
}

.admin-header-category-menu a {
    display:block;
    padding:.3rem .45rem;
    color:#fff;
    font:inherit;
    text-decoration:none;
    white-space:nowrap;
}

.admin-header-category-menu a:hover,
.admin-header-category-menu a:focus-visible {
    background:var(--phi-admin-control-hover, #222);
    outline:none;
}

.admin-header-column-links {
    display:grid;
    grid-template-columns:repeat(3, 18px);
    gap:2px;
}

.admin-header-column-links a {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1px;
    width:18px;
    height:14px;
    border:1px solid currentColor;
    border-radius:2px;
    color:inherit;
    text-decoration:none;
    opacity:.72;
}

.admin-header-column-links a:hover,
.admin-header-column-links a:focus-visible {
    opacity:1;
    outline:1px solid currentColor;
    outline-offset:-2px;
}

.admin-header-column-links span {
    width:2px;
    height:10px;
    border:1px solid currentColor;
    border-radius:1px;
}

@media(max-width:575px) {
    .admin-public-button {
        top:64px;
        left:max(8px, env(safe-area-inset-left));
        width:36px;
        height:36px;
    }

    .admin-header-gallery-controls {
        right:8px;
        height:36px;
    }
}

/* Calendar keeps its purpose-built page header instead of the gallery header. */
body.admin-calendar {
    padding-top:0 !important;
}

@media(max-width:700px) {
    body.admin-calendar {
        padding-top:max(56px, calc(env(safe-area-inset-top) + 28px)) !important;
    }
}

.admin-calendar .admin-public-button {
    top:18px;
    left:18px;
    width:24px;
    height:24px;
}

@media(max-width:1024px) {
    .admin-calendar .admin-public-button {
        top:max(12px, env(safe-area-inset-top));
        left:max(10px, env(safe-area-inset-left));
        width:36px;
        height:36px;
        padding:6px;
        border:1px solid rgba(255,255,255,.55);
        border-radius:50%;
        background:var(--phi-admin-toolbar, darkslategrey);
        box-shadow:0 2px 8px rgba(0,0,0,.35);
    }

    .admin-calendar .admin-public-button img {
        width:24px;
        height:24px;
    }

    .admin-calendar .admin-public-button-label {
        display:none;
    }
}