/* ATT-Clouds Hotspot Portal | Copyright (c) 2026 ATT-Clouds. All rights reserved. */
/*
|--------------------------------------------------------------------------
| ATT-Clouds Design System 3.0
|--------------------------------------------------------------------------
| Secretary-bird inspired precision geometry: monochrome-first surfaces,
| restrained gold signal rails, and chamfered controls.
*/

:root{
    --att-control-cut:9px;
    --att-control-clip:polygon(
        0 0,
        calc(100% - var(--att-control-cut)) 0,
        100% var(--att-control-cut),
        100% 100%,
        var(--att-control-cut) 100%,
        0 calc(100% - var(--att-control-cut))
    );
    --att-control-surface:linear-gradient(145deg,rgba(30,43,64,.96),rgba(14,24,40,.96));
    --att-control-border:rgba(255,255,255,.13);
}

body{
    font-family:"Inter",sans-serif;
}

h1,h2,h3,h4,h5,h6,
.page-title,
.sidebar-brand-text h4{
    font-family:"Exo 2","Inter",sans-serif;
    letter-spacing:.01em;
}

/* Brand family */

.sidebar-brand-icon{
    width:56px;
    height:56px;
    overflow:visible;
    flex:0 0 56px;
    border:1px solid rgba(212,175,55,.25);
    border-radius:0;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
    box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 0 24px rgba(212,175,55,.04);
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}

.sidebar-brand-icon img{
    width:52px;
    height:52px;
    object-fit:contain;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.32));
}

.sidebar-brand-text h4{
    font-size:18px;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.brand-att{
    color:#eef1f4;
    font-weight:800;
}

.brand-clouds{
    color:var(--att-gold-light,#f7d774);
    font-weight:500;
}

.auth-brand-wordmark,
.guest-brand-name,
.sidebar-brand-text h4,
.footer-logo [dir="ltr"]{
    unicode-bidi:isolate;
}

.sidebar-brand-text small{
    color:#8f9caf;
    font-size:9px;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.footer-emblem{
    width:34px;
    height:30px;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(212,175,55,.22);
    border-radius:0;
    background:rgba(255,255,255,.035);
    clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}

.footer-emblem img{
    width:32px;
    height:32px;
    object-fit:contain;
}

.guest-brand-emblem{
    padding:4px;
    overflow:hidden;
    border:1px solid rgba(212,175,55,.25);
    border-radius:0;
    background:rgba(255,255,255,.035);
    clip-path:polygon(0 0,calc(100% - 13px) 0,100% 13px,100% 100%,13px 100%,0 calc(100% - 13px));
}

.guest-brand-emblem img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.guest-brand-name .brand-clouds,
.footer-logo .brand-clouds{
    color:var(--att-gold-light,#f7d774);
}

/* Precision navigation */

.sidebar-item{
    position:relative;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}

.sidebar-item::after{
    content:"";
    position:absolute;
    inset-block:10px;
    inset-inline-start:0;
    width:2px;
    background:var(--att-gold);
    opacity:0;
    box-shadow:0 0 12px rgba(212,175,55,.55);
    transition:opacity .2s ease;
}

.sidebar-item:hover{
    border-color:rgba(212,175,55,.16);
    background:linear-gradient(90deg,rgba(212,175,55,.07),rgba(255,255,255,.025));
}

.sidebar-item.active{
    color:var(--att-gold-light);
    border-color:rgba(212,175,55,.32);
    background:linear-gradient(105deg,rgba(212,175,55,.15),rgba(255,255,255,.035) 62%,rgba(212,175,55,.055));
    box-shadow:inset 0 0 24px rgba(212,175,55,.055),0 10px 24px rgba(0,0,0,.16);
}

.sidebar-item.active::after{
    opacity:1;
}

.sidebar-item.active i{
    color:var(--att-gold-light);
    filter:drop-shadow(0 0 6px rgba(212,175,55,.28));
}

/* Engineered button geometry */

.btn:not(.btn-close):not(.btn-link):not(.btn-login){
    --att-btn-color:#e7edf5;
    --att-btn-bg:var(--att-control-surface);
    --att-btn-border:var(--att-control-border);
    --att-btn-rail:var(--att-gold);
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.48rem;
    border:1px solid var(--att-btn-border);
    border-radius:0;
    color:var(--att-btn-color);
    background:var(--att-btn-bg);
    box-shadow:inset 0 1px rgba(255,255,255,.055),0 8px 18px rgba(0,0,0,.14);
    clip-path:var(--att-control-clip);
    transition:transform .18s ease,filter .18s ease,color .18s ease,background .18s ease,border-color .18s ease;
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login)::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset-inline-start:0;
    inset-block:7px;
    width:2px;
    background:var(--att-btn-rail);
    box-shadow:0 0 12px color-mix(in srgb,var(--att-btn-rail) 58%,transparent);
    transition:width .18s ease,opacity .18s ease;
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login)::after{
    content:"";
    position:absolute;
    z-index:-1;
    top:-80%;
    left:-35%;
    width:24%;
    height:250%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
    transform:rotate(18deg);
    transition:left .42s ease;
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login):hover{
    color:var(--att-btn-color);
    border-color:color-mix(in srgb,var(--att-btn-rail) 48%,var(--att-btn-border));
    transform:translateY(-2px);
    filter:drop-shadow(0 9px 14px rgba(0,0,0,.22));
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login):hover::before{
    width:4px;
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login):hover::after{
    left:118%;
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login):active{
    transform:translateY(0) scale(.985);
    filter:none;
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login):focus-visible{
    outline:2px solid var(--att-gold-light);
    outline-offset:3px;
    box-shadow:var(--att-focus);
}

.btn:not(.btn-close):not(.btn-link):not(.btn-login):disabled,
.btn:not(.btn-close):not(.btn-link):not(.btn-login).disabled{
    opacity:.48;
    transform:none;
    filter:grayscale(.25);
    cursor:not-allowed;
}

.btn-primary,
.btn-warning{
    --att-btn-color:#0a111c!important;
    --att-btn-bg:linear-gradient(118deg,#b88920,#d9b846 48%,#f2d475)!important;
    --att-btn-border:rgba(247,215,116,.58)!important;
    --att-btn-rail:#fff0b3!important;
    font-weight:800;
}

.btn-secondary,
.btn-dark,
.btn-light{
    --att-btn-color:#e6edf6!important;
    --att-btn-bg:linear-gradient(145deg,#26364d,#131f31)!important;
    --att-btn-border:rgba(168,181,198,.24)!important;
    --att-btn-rail:#9aa7b8!important;
}

.btn-success{
    --att-btn-color:#d9fff2!important;
    --att-btn-bg:linear-gradient(145deg,rgba(17,96,76,.96),rgba(10,55,49,.98))!important;
    --att-btn-border:rgba(74,222,168,.38)!important;
    --att-btn-rail:#4adea8!important;
}

.btn-danger{
    --att-btn-color:#ffe6e8!important;
    --att-btn-bg:linear-gradient(145deg,rgba(126,35,47,.96),rgba(68,23,34,.98))!important;
    --att-btn-border:rgba(251,113,133,.38)!important;
    --att-btn-rail:#fb7185!important;
}

.btn-info{
    --att-btn-color:#e0f7ff!important;
    --att-btn-bg:linear-gradient(145deg,rgba(20,89,116,.96),rgba(12,50,74,.98))!important;
    --att-btn-border:rgba(56,189,248,.38)!important;
    --att-btn-rail:#38bdf8!important;
}

.btn-outline-primary,
.btn-outline-warning{
    --att-btn-color:var(--att-gold-light)!important;
    --att-btn-bg:linear-gradient(145deg,rgba(212,175,55,.075),rgba(255,255,255,.018))!important;
    --att-btn-border:rgba(212,175,55,.38)!important;
    --att-btn-rail:var(--att-gold)!important;
}

.btn-outline-secondary{
    --att-btn-color:#d6dfeb!important;
    --att-btn-bg:linear-gradient(145deg,rgba(148,163,184,.07),rgba(255,255,255,.018))!important;
    --att-btn-border:rgba(148,163,184,.3)!important;
    --att-btn-rail:#94a3b8!important;
}

.btn-outline-success{
    --att-btn-color:#76e8c4!important;
    --att-btn-bg:linear-gradient(145deg,rgba(45,212,163,.075),rgba(255,255,255,.018))!important;
    --att-btn-border:rgba(45,212,163,.35)!important;
    --att-btn-rail:#2dd4a3!important;
}

.btn-outline-danger{
    --att-btn-color:#ff9daa!important;
    --att-btn-bg:linear-gradient(145deg,rgba(239,68,68,.075),rgba(255,255,255,.018))!important;
    --att-btn-border:rgba(251,113,133,.38)!important;
    --att-btn-rail:#fb7185!important;
}

.sidebar-footer .btn-danger{
    --att-btn-bg:linear-gradient(145deg,rgba(239,68,68,.09),rgba(255,255,255,.025))!important;
    --att-btn-border:rgba(251,113,133,.26)!important;
}

.btn-group,
.btn-group-vertical{
    gap:3px;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child){
    margin-left:0;
}

/* Header controls use the same precision language */

.sidebar-toggle,
.topbar-action,
.language-switcher{
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}

.language-switcher{
    border-color:rgba(212,175,55,.3);
    background:linear-gradient(145deg,rgba(212,175,55,.09),rgba(255,255,255,.025));
}

.topbar-profile{
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}

/* Form and status refinements */

.form-control,
.form-select,
.input-group-text{
    border-radius:9px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.form-control:hover,
.form-select:hover{
    border-color:rgba(212,175,55,.24);
}

.badge{
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}

.alert{
    border-radius:0;
    clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}

@media(prefers-reduced-motion:reduce){
    .btn,
    .btn::before,
    .btn::after,
    .sidebar-item{
        transition:none!important;
    }
}

@media(max-width:767.98px){
    .sidebar-brand-icon{
        width:50px;
        height:50px;
        flex-basis:50px;
    }

    .sidebar-brand-icon img{
        width:47px;
        height:47px;
    }

    .btn:not(.btn-close):not(.btn-link):not(.btn-login){
        --att-control-cut:8px;
    }
}