/**
 * NCIS UI Polish v1.1
 * Final Login + Floating Dock refinement
 * PHP-independent / safe for PHP 7.4 application
 */

/* =========================================================
   1. LOGIN BRAND — FINAL POSITIONING
   ========================================================= */

.auth-screen {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

.auth-brand {
    position: relative;
    padding-top: 22px !important;
    padding-bottom: 14px !important;
    overflow: visible !important;
}

.ncis-login-brand-link {
    display: block !important;
    width: min(62vw, 252px) !important;
    margin: 0 auto !important;
    padding: 8px 8px 0 !important;
    overflow: visible !important;
}

.ncis-login-logo {
    display: block !important;
    width: 100% !important;
    max-width: 252px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto 4px !important;

    object-fit: contain !important;
    object-position: center center !important;

    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;

    transform: translateY(2px);
    filter:
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.28))
        drop-shadow(0 0 10px rgba(217, 173, 69, 0.10));
}

.auth-brand h1 {
    margin: 2px 0 0 !important;
    line-height: 1 !important;
}

.auth-brand p {
    margin: 12px 0 0 !important;
}

.auth-brand small {
    display: block;
    margin-top: 4px !important;
}

/* =========================================================
   2. FLOATING DOCK — FINAL PREMIUM POLISH
   ========================================================= */

:root {
    --dock-height: 70px;
    --dock-side-gap: 16px;
    --dock-bottom-gap: 12px;
}

.content-screen {
    padding-bottom: calc(
        var(--dock-height) +
        var(--dock-bottom-gap) +
        env(safe-area-inset-bottom) +
        32px
    ) !important;
}

.ncis-floating-dock {
    bottom: calc(var(--dock-bottom-gap) + env(safe-area-inset-bottom));
    width: min(calc(100% - (var(--dock-side-gap) * 2)), 680px);
}

.ncis-floating-dock-inner {
    min-height: var(--dock-height);
    padding: 6px 8px;

    border-radius: 26px;
    border: 1px solid rgba(217, 173, 69, 0.28);

    background:
        linear-gradient(
            145deg,
            rgba(14, 48, 34, 0.72),
            rgba(2, 15, 10, 0.84)
        );

    -webkit-backdrop-filter: blur(26px) saturate(145%);
    backdrop-filter: blur(26px) saturate(145%);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.50),
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 0 0 1px rgba(131, 189, 69, 0.035);
}

.dock-item {
    min-height: 56px;
    padding: 4px 3px;
    gap: 3px;
    border-radius: 20px;
    isolation: isolate;
}

.dock-item::before {
    top: 2px;
    width: 26px;
    height: 2px;
    z-index: 2;
}

/* Gold capsule behind the active icon and label */
.dock-item::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4px 3px;

    border-radius: 18px;
    border: 1px solid transparent;

    background: transparent;
    box-shadow: none;

    opacity: 0;
    transform: scale(0.92);

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.dock-item.active {
    color: var(--gold);
    background: transparent;
}

.dock-item.active::after {
    opacity: 1;
    transform: scale(1);

    border-color: rgba(217, 173, 69, 0.18);

    background:
        linear-gradient(
            145deg,
            rgba(217, 173, 69, 0.16),
            rgba(217, 173, 69, 0.045)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 7px 20px rgba(0, 0, 0, 0.16),
        0 0 18px rgba(217, 173, 69, 0.06);
}

.dock-item.active::before {
    background: var(--gold);
    box-shadow:
        0 0 8px rgba(217, 173, 69, 0.60),
        0 0 16px rgba(217, 173, 69, 0.20);
}

.dock-icon {
    width: 27px;
    height: 27px;
}

.dock-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
}

.dock-icon img {
    width: 28px;
    height: 28px;
}

.dock-item.active .dock-icon {
    transform: translateY(-1px);
}

.dock-label {
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Keep SEAL emblem legible without making it visually heavier */
.dock-item .dock-icon img {
    border-radius: 6px;
}

.dock-item.active .dock-icon img {
    filter:
        grayscale(0)
        brightness(1.12)
        drop-shadow(0 0 7px rgba(217, 173, 69, 0.30));
}

/* Mobile compact tuning */
@media (max-width: 390px) {
    :root {
        --dock-side-gap: 10px;
        --dock-bottom-gap: 9px;
    }

    .ncis-floating-dock-inner {
        min-height: 68px;
        padding: 5px 6px;
        border-radius: 23px;
    }

    .dock-item {
        min-height: 54px;
        border-radius: 17px;
    }

    .dock-item::after {
        inset: 3px 2px;
        border-radius: 16px;
    }

    .dock-label {
        font-size: 9px;
    }

    .ncis-login-brand-link {
        width: min(64vw, 244px) !important;
    }

    .ncis-login-logo {
        max-width: 244px !important;
    }
}

/* v1.2 — complete functional dock foundation. */
.ncis-floating-dock{
    position:fixed;
    z-index:6600;
    left:50%;
    transform:translateX(-50%);
    display:block;
    margin:0;
    padding:0;
    pointer-events:auto;
    isolation:isolate;
}
.ncis-floating-dock-inner{
    position:relative;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:stretch;
    width:100%;
    overflow:hidden;
}
.ncis-floating-dock::before,.ncis-floating-dock::after,
.ncis-floating-dock-inner::before,.ncis-floating-dock-inner::after{pointer-events:none}
.dock-item{
    position:relative;
    z-index:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:rgba(232,241,237,.68);
    text-decoration:none;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
    pointer-events:auto;
}
.dock-item::before,.dock-item::after{pointer-events:none}
.dock-item:focus-visible{outline:2px solid #82d9cb;outline-offset:-3px}
.dock-item:active{transform:scale(.96)}
.dock-icon{display:grid;place-items:center;flex:0 0 auto;color:currentColor}
.dock-icon svg{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.dock-label,.dock-label>span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-item.active{color:#f0cf76}
@media(max-width:390px){.dock-label{font-size:10px!important}.dock-icon svg{width:23px;height:23px}}