/* ATT-Clouds Hotspot Portal | Copyright (c) 2026 ATT-Clouds. All rights reserved. */
/*==============================================================
    ATT-CLOUDS UI v4
    Enterprise Hotspot Platform
==============================================================*/


/*==============================================================
    ROOT
==============================================================*/

:root{

    --sidebar-width:280px;
    --topbar-height:78px;
    --footer-height:64px;

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:20px;

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow:0 8px 30px rgba(0,0,0,.08);
    --shadow-lg:0 20px 45px rgba(0,0,0,.12);

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --primary-light:#dbeafe;

    --success:#10b981;
    --warning:#f59e0b;
    --danger:#ef4444;

    --white:#ffffff;

    --bg:#f5f7fb;
    --bg-dark:#eef2f7;

    --text:#1e293b;
    --text-light:#64748b;

    --border:#e5e7eb;

    --sidebar-bg:#0f172a;
    --sidebar-hover:#1e293b;
    --sidebar-active:#2563eb;

}


/*==============================================================
    RESET
==============================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}


/*==============================================================
    TYPOGRAPHY
==============================================================*/

h1,h2,h3,h4,h5,h6{

    margin:0;
    font-weight:700;
    color:var(--text);

}

p{

    margin:0;

}

a{

    text-decoration:none;

}

img{

    max-width:100%;

}


/*==============================================================
    SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;
    border-radius:30px;

}

::-webkit-scrollbar-track{

    background:transparent;

}


/*==============================================================
    SIDEBAR
==============================================================*/

.sidebar{

    position:fixed;

    top:0;
    left:0;

    width:var(--sidebar-width);
    height:100vh;

    background:var(--sidebar-bg);

    display:flex;
    flex-direction:column;

    z-index:1100;

    box-shadow:var(--shadow-lg);

}


/*==============================================================
    SIDEBAR HEADER
==============================================================*/

.sidebar-header{

    padding:28px 24px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.sidebar-brand{

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

    color:#fff;

}

.sidebar-brand-icon{

    width:56px;
    height:56px;

    border-radius:18px;

    background:linear-gradient(135deg,#3b82f6,#2563eb);

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

    color:#fff;
    font-size:28px;

    flex-shrink:0;

}

.sidebar-brand-text h4{

    color:#fff;
    font-size:20px;

}

.sidebar-brand-text small{

    color:rgba(255,255,255,.65);

}


/*==============================================================
    SIDEBAR BODY
==============================================================*/

.sidebar-body{

    flex:1;

    overflow:auto;

    padding:24px 16px;

}

.sidebar-section{

    margin-bottom:34px;

}

.sidebar-title{

    color:rgba(255,255,255,.45);

    font-size:11px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin:0 14px 16px;

}


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

.sidebar-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px 16px;

    border-radius:14px;

    color:#cbd5e1;

    margin-bottom:6px;

    transition:.25s;

}

.sidebar-item i{

    width:22px;

    text-align:center;

    font-size:18px;

}

.sidebar-item span{

    font-weight:600;

}

.sidebar-item:hover{

    background:var(--sidebar-hover);

    color:#fff;

}

.sidebar-item.active{

    background:var(--sidebar-active);

    color:#fff;

    box-shadow:0 10px 25px rgba(37,99,235,.35);

}


/*==============================================================
    SIDEBAR FOOTER
==============================================================*/

.sidebar-footer{

    padding:22px;

    border-top:1px solid rgba(255,255,255,.08);

}

.sidebar-profile{

    display:flex;

    gap:14px;

    align-items:flex-start;

    margin-bottom:20px;

}

.sidebar-avatar{

    width:54px;
    height:54px;

    border-radius:50%;

    background:linear-gradient(135deg,#60a5fa,#2563eb);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    font-weight:700;

    flex-shrink:0;

}

.sidebar-user-name{

    color:#fff;

    font-weight:700;

}

.sidebar-user-role{

    color:#94a3b8;

    margin-top:2px;

    font-size:13px;

}
/*==============================================================
    TOPBAR
==============================================================*/

.app-wrapper{

    margin-left:var(--sidebar-width);

    min-height:100vh;

    padding-top:var(--topbar-height);

    padding-bottom:var(--footer-height);

    transition:.3s;

}

.topbar{

    position:fixed;

    top:0;
    left:var(--sidebar-width);
    right:0;

    height:var(--topbar-height);

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(16px);

    border-bottom:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

    z-index:1000;

}

.topbar-start{

    display:flex;

    align-items:center;

    gap:18px;

}

.sidebar-toggle{

    width:48px;

    height:48px;

    border:none;

    border-radius:14px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    color:var(--text);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.sidebar-toggle:hover{

    background:var(--primary);

    color:#fff;

}

.sidebar-toggle i{

    font-size:24px;

}

.topbar-heading{

    display:flex;

    flex-direction:column;

}

.page-title{

    font-size:26px;

    font-weight:700;

    line-height:1.1;

}

.page-subtitle{

    margin-top:4px;

    color:var(--text-light);

    font-size:14px;

}

.topbar-end{

    display:flex;

    align-items:center;

    gap:14px;

}


/*==============================================================
    TOPBAR ACTIONS
==============================================================*/

.topbar-action{

    width:46px;

    height:46px;

    border:none;

    border-radius:14px;

    background:#fff;

    box-shadow:var(--shadow-sm);

    color:var(--text);

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.topbar-action i{

    font-size:18px;

}

.topbar-action:hover{

    background:var(--primary);

    color:#fff;

}


/*==============================================================
    TOPBAR PROFILE
==============================================================*/

.topbar-profile{

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    border-radius:18px;

    padding:8px 16px 8px 8px;

    box-shadow:var(--shadow-sm);

}

.topbar-profile-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:linear-gradient(135deg,#3b82f6,#2563eb);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    font-weight:700;

}

.topbar-profile-name{

    font-size:15px;

    font-weight:700;

    color:var(--text);

}

.topbar-profile-role{

    font-size:13px;

    color:var(--text-light);

}


/*==============================================================
    PAGE CONTENT
==============================================================*/

.page-content{

    padding:28px;

    min-height:calc(100vh - var(--topbar-height) - var(--footer-height));

}


/*==============================================================
    CONTENT CARDS
==============================================================*/

.card{

    border:none;

    border-radius:20px;

    background:#fff;

    box-shadow:var(--shadow);

}

.card-header{

    background:#fff;

    border-bottom:1px solid var(--border);

    padding:20px 24px;

    border-radius:20px 20px 0 0 !important;

}

.card-body{

    padding:24px;

}

.card-footer{

    background:#fff;

    border-top:1px solid var(--border);

}


/*==============================================================
    DASHBOARD WIDGETS
==============================================================*/

.dashboard-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

    box-shadow:var(--shadow);

    transition:.25s;

    height:100%;

}

.dashboard-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow-lg);

}

.dashboard-icon{

    width:64px;

    height:64px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary-light);

    color:var(--primary);

    font-size:28px;

    margin-bottom:20px;

}

.dashboard-title{

    font-size:14px;

    color:var(--text-light);

}

.dashboard-value{

    margin-top:8px;

    font-size:34px;

    font-weight:800;

    color:var(--text);

}
/*==============================================================
    TABLES
==============================================================*/

.table{

    margin-bottom:0;

    vertical-align:middle;

}

.table thead th{

    background:#f8fafc;

    border-bottom:2px solid var(--border);

    color:var(--text);

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

    padding:16px;

}

.table tbody td{

    padding:16px;

    border-color:var(--border);

    color:var(--text);

}

.table-hover tbody tr{

    transition:.2s;

}

.table-hover tbody tr:hover{

    background:#f8fbff;

}


/*==============================================================
    FORMS
==============================================================*/

.form-label{

    font-weight:600;

    color:var(--text);

    margin-bottom:8px;

}

.form-control,
.form-select{

    border:1px solid var(--border);

    border-radius:12px;

    min-height:48px;

    padding:12px 16px;

    font-size:14px;

    box-shadow:none;

    transition:.25s;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 .2rem rgba(37,99,235,.12);

}

textarea.form-control{

    min-height:120px;

}


/*==============================================================
    BUTTONS
==============================================================*/

.btn{

    border-radius:12px;

    font-weight:600;

    min-height:46px;

    padding:10px 18px;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);

    border-color:var(--primary-dark);

}

.btn-success{

    background:var(--success);

    border-color:var(--success);

}

.btn-danger{

    background:var(--danger);

    border-color:var(--danger);

}

.btn-warning{

    color:#fff;

}


/*==============================================================
    BADGES
==============================================================*/

.badge{

    border-radius:999px;

    padding:.55rem .85rem;

    font-size:12px;

    font-weight:600;

}


/*==============================================================
    ALERTS
==============================================================*/

.alert{

    border:none;

    border-radius:16px;

    box-shadow:var(--shadow-sm);

    padding:18px 20px;

}


/*==============================================================
    DROPDOWNS
==============================================================*/

.dropdown-menu{

    border:none;

    border-radius:16px;

    box-shadow:var(--shadow-lg);

    padding:10px;

}

.dropdown-item{

    border-radius:10px;

    padding:10px 14px;

}

.dropdown-item:hover{

    background:var(--primary-light);

}


/*==============================================================
    MODALS
==============================================================*/

.modal-content{

    border:none;

    border-radius:22px;

    box-shadow:var(--shadow-lg);

}

.modal-header{

    border-bottom:1px solid var(--border);

    padding:22px 24px;

}

.modal-body{

    padding:24px;

}

.modal-footer{

    border-top:1px solid var(--border);

    padding:18px 24px;

}


/*==============================================================
    PAGINATION
==============================================================*/

.pagination{

    gap:8px;

}

.page-link{

    border:none;

    border-radius:10px;

    min-width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    box-shadow:var(--shadow-sm);

}

.page-item.active .page-link{

    background:var(--primary);

    border-color:var(--primary);

}


/*==============================================================
    FOOTER
==============================================================*/

.footer{

    position:fixed;

    left:var(--sidebar-width);

    right:0;

    bottom:0;

    height:var(--footer-height);

    background:#fff;

    border-top:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 28px;

    z-index:999;

}

.footer-left,
.footer-center,
.footer-right{

    display:flex;

    align-items:center;

    gap:16px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

    font-weight:700;

}

.footer-logo i{

    color:var(--primary);

}

.footer-text{

    color:var(--text-light);

    font-size:13px;

}

.footer-chip{

    display:flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:#f8fafc;

    font-size:13px;

}

.footer-version{

    font-weight:600;

}

.footer-copyright{

    font-size:13px;

    color:var(--text-light);

}
/*==============================================================
    UTILITIES
==============================================================*/

.bg-primary-soft{

    background:var(--primary-light)!important;

}

.text-primary{

    color:var(--primary)!important;

}

.text-muted{

    color:var(--text-light)!important;

}

.shadow-sm{

    box-shadow:var(--shadow-sm)!important;

}

.shadow{

    box-shadow:var(--shadow)!important;

}

.shadow-lg{

    box-shadow:var(--shadow-lg)!important;

}

.rounded-xl{

    border-radius:20px!important;

}

.rounded-xxl{

    border-radius:28px!important;

}

.cursor-pointer{

    cursor:pointer;

}

.transition{

    transition:.25s;

}


/*==============================================================
    LOADING
==============================================================*/

.loading{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:60px;

}

.spinner{

    width:48px;

    height:48px;

    border:4px solid #e2e8f0;

    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


/*==============================================================
    ANIMATIONS
==============================================================*/

.fade-up{

    animation:fadeUp .35s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(16px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==============================================================
    SIDEBAR OVERLAY
==============================================================*/

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    backdrop-filter:blur(2px);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1050;

}

.sidebar-overlay.show{

    opacity:1;

    visibility:visible;

}


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

@media (max-width:992px){

    .sidebar{

        transform:translateX(-100%);

        transition:.3s;

    }

    .sidebar.show{

        transform:translateX(0);

    }

    .topbar{

        left:0;

        padding:0 18px;

    }

    .app-wrapper{

        margin-left:0;

    }

    .footer{

        left:0;

        padding:0 18px;

        flex-direction:column;

        justify-content:center;

        gap:8px;

        height:auto;

        min-height:var(--footer-height);

        padding-top:10px;

        padding-bottom:10px;

    }

    .footer-center{

        display:none;

    }

    .page-content{

        padding:20px;

    }

}


/*==============================================================
    SMALL DEVICES
==============================================================*/

@media (max-width:768px){

    .topbar-profile-info{

        display:none;

    }

    .page-title{

        font-size:22px;

    }

    .page-subtitle{

        display:none;

    }

    .topbar{

        height:70px;

    }

    .app-wrapper{

        padding-top:70px;

    }

    .dashboard-card{

        padding:20px;

    }

    .dashboard-value{

        font-size:28px;

    }

    .card-body{

        padding:18px;

    }

    .table-responsive{

        border-radius:18px;

    }

}


/*==============================================================
    EXTRA SMALL
==============================================================*/

@media (max-width:576px){

    .page-content{

        padding:15px;

    }

    .topbar{

        padding:0 12px;

    }

    .sidebar{

        width:280px;

    }

    .btn{

        width:100%;

    }

    .footer-left{

        flex-direction:column;

        gap:4px;

        text-align:center;

    }

}


/*==============================================================
    PRINT
==============================================================*/

@media print{

    .sidebar,
    .topbar,
    .footer,
    .sidebar-overlay,
    .sidebar-toggle{

        display:none!important;

    }

    .app-wrapper{

        margin:0!important;

        padding:0!important;

    }

    .page-content{

        padding:0!important;

    }

    .card{

        box-shadow:none!important;

        border:1px solid #ddd!important;

    }

}
/*==============================================================
    DASHBOARD STATISTICS
==============================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:24px;

    margin-bottom:30px;

}

.stat-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    border-radius:20px;

    padding:26px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.stat-card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-lg);

}

.stat-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:5px;
    height:100%;

    background:var(--primary);

}

.stat-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.stat-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary-light);

    color:var(--primary);

    font-size:26px;

}

.stat-number{

    font-size:38px;

    font-weight:800;

    line-height:1;

}

.stat-title{

    margin-top:8px;

    color:var(--text-light);

    font-size:14px;

}


/*==============================================================
    ROUTER CARDS
==============================================================*/

.router-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));

    gap:24px;

}

.router-card{

    background:#fff;

    border-radius:20px;

    padding:24px;

    box-shadow:var(--shadow);

    transition:.25s;

}

.router-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow-lg);

}

.router-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.router-name{

    font-size:20px;

    font-weight:700;

}

.router-ip{

    color:var(--text-light);

    font-size:14px;

}

.router-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-size:13px;

    font-weight:600;

}

.router-status.online{

    color:var(--success);

}

.router-status.offline{

    color:var(--danger);

}

.router-info{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin-top:20px;

}

.router-info div{

    color:var(--att-text,#e8eef8);

    background:rgba(255,255,255,.045);

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    padding:14px;

}

.router-info strong,
.router-status-text{

    color:var(--att-text,#e8eef8);

}


/*==============================================================
    VOUCHER PAGE
==============================================================*/

.voucher-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:24px;

    flex-wrap:wrap;

}

.voucher-filters{

    display:flex;

    gap:14px;

    flex-wrap:wrap;

}

.voucher-actions{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

.voucher-card{

    background:#fff;

    border-radius:18px;

    box-shadow:var(--shadow-sm);

    padding:20px;

    transition:.25s;

}

.voucher-card:hover{

    box-shadow:var(--shadow);

}


/*==============================================================
    ONLINE USERS
==============================================================*/

.user-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    font-weight:600;

}

.user-status::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

}

.user-status.online::before{

    background:var(--success);

}

.user-status.offline::before{

    background:var(--danger);

}


/*==============================================================
    SEARCH BAR
==============================================================*/

.search-box{

    position:relative;

}

.search-box i{

    position:absolute;

    left:16px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}

.search-box input{

    padding-left:46px;

}


/*==============================================================
    EMPTY STATE
==============================================================*/

.empty-state{

    text-align:center;

    padding:70px 20px;

}

.empty-state i{

    font-size:70px;

    color:#cbd5e1;

    margin-bottom:20px;

}

.empty-state h3{

    margin-bottom:10px;

}

.empty-state p{

    color:var(--text-light);

}


/*==============================================================
    LOGIN PAGE
==============================================================*/

.auth-wrapper{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#eff6ff,#dbeafe);

    padding:30px;

}

.auth-card{

    width:100%;

    max-width:440px;

    background:#fff;

    border-radius:24px;

    padding:40px;

    box-shadow:var(--shadow-lg);

}

.auth-logo{

    width:82px;

    height:82px;

    margin:0 auto 24px;

    border-radius:24px;

    background:linear-gradient(135deg,#3b82f6,#2563eb);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:38px;

}

.auth-title{

    text-align:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:8px;

}

.auth-subtitle{

    text-align:center;

    color:var(--text-light);

    margin-bottom:30px;

}


/*==============================================================
    END
==============================================================*/
/*==============================================================
    ACTION CARDS
==============================================================*/

.action-card{

    display:flex;

    align-items:center;

    gap:16px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:18px;

    color:var(--text);

    transition:.25s;

    box-shadow:var(--shadow-sm);

    height:100%;

}

.action-card:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

    border-color:var(--primary);

    color:inherit;

}

.action-card-icon{

    width:56px;

    height:56px;

    border-radius:16px;

    background:var(--primary-light);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    flex-shrink:0;

}

.action-card-content{

    flex:1;

}

.action-card-title{

    font-size:15px;

    font-weight:700;

    margin-bottom:4px;

}

.action-card-subtitle{

    font-size:13px;

    color:var(--text-light);

}

.action-card-arrow{

    color:#94a3b8;

    font-size:18px;

    transition:.25s;

}

.action-card:hover .action-card-arrow{

    transform:translateX(5px);

    color:var(--primary);

}


/*==============================================================
    CURRENT ROUTER
==============================================================*/

.current-router{

    border:2px solid var(--primary);

    position:relative;

}

.current-router::after{

    content:"CURRENT";

    position:absolute;

    top:16px;

    right:16px;

    background:var(--primary);

    color:#fff;

    padding:4px 10px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.8px;

}
/*==============================================================
    VOUCHER PAGE
==============================================================*/

.page-content-wrapper{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.loading-overlay{

    position:fixed;

    inset:0;

    display:none;

    background:rgba(255,255,255,.80);

    backdrop-filter:blur(3px);

    z-index:5000;

}

.toast{

    border-radius:16px;

    box-shadow:var(--shadow-lg);

}

/*==============================================================
    ATT-CLOUDS BRAND THEME
    Shared with the login experience
==============================================================*/

:root{
    --primary:var(--att-gold);
    --primary-dark:var(--att-gold-dark);
    --primary-light:rgba(212,175,55,.14);
    --success:var(--att-success);
    --warning:var(--att-warning);
    --danger:var(--att-danger);
    --white:var(--att-text);
    --bg:var(--att-navy-800);
    --bg-dark:var(--att-navy-900);
    --text:var(--att-text);
    --text-light:var(--att-muted);
    --border:var(--att-border);
    --sidebar-bg:rgba(5,11,21,.94);
    --sidebar-hover:rgba(255,255,255,.06);
    --sidebar-active:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));
    --shadow-sm:var(--att-shadow-sm);
    --shadow:var(--att-shadow);
    --shadow-lg:var(--att-shadow-lg);
}

body{
    color-scheme:dark;
    background:radial-gradient(circle at 8% 4%,rgba(212,175,55,.09),transparent 28%),radial-gradient(circle at 92% 92%,rgba(59,130,246,.12),transparent 38%),linear-gradient(160deg,var(--att-navy-700),var(--att-navy-800) 46%,var(--att-navy-900));
    background-attachment:fixed;
}

body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:90px 90px;}
::selection{color:var(--att-navy-900);background:var(--att-gold-light);}
::-webkit-scrollbar-thumb{background:#334155;}

.sidebar{background:var(--sidebar-bg);border-right:1px solid var(--att-border);backdrop-filter:blur(20px);}
.sidebar-header{border-color:var(--att-border);}
.sidebar-brand-icon{background:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));color:var(--att-navy-900);box-shadow:0 14px 32px rgba(212,175,55,.24);}
.sidebar-brand-icon span{font-size:15px;font-weight:800;letter-spacing:1px;}
.sidebar-brand-text small{letter-spacing:.7px;}
.sidebar-item{color:#cbd5e1;}
.sidebar-item:hover{color:var(--att-text);border-color:rgba(212,175,55,.14);}
.sidebar-item.active{color:var(--att-navy-900);background:var(--sidebar-active);box-shadow:0 12px 28px rgba(212,175,55,.22);}
.sidebar-footer{background:rgba(255,255,255,.025);border-color:var(--att-border);}
.sidebar-avatar,.topbar-profile-avatar{color:var(--att-navy-900);background:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));}

.topbar{background:rgba(11,21,38,.84);border-color:var(--att-border);box-shadow:0 10px 35px rgba(0,0,0,.16);}
.sidebar-toggle,.topbar-action,.topbar-profile{color:var(--att-text);background:rgba(255,255,255,.055);border:1px solid var(--att-border);box-shadow:none;}
.sidebar-toggle:hover,.topbar-action:hover{color:var(--att-navy-900);background:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));border-color:transparent;}
.page-title,.topbar-profile-name{color:var(--att-text);}
.page-content{position:relative;}

.card,.dashboard-card,.stat-card,.router-card,.action-card,.current-router-card,.empty-state{color:var(--att-text);background:linear-gradient(145deg,rgba(23,35,58,.92),rgba(15,23,42,.88));border:1px solid var(--att-border);box-shadow:var(--att-shadow-sm);backdrop-filter:blur(16px);}
.card:hover,.dashboard-card:hover,.stat-card:hover,.router-card:hover,.action-card:hover{border-color:rgba(212,175,55,.28);}
.card-header,.card-footer{color:var(--att-text);background:rgba(255,255,255,.025);border-color:var(--att-border);}
.dashboard-icon,.stat-icon,.action-card-icon,.current-router-icon{color:var(--att-gold-light);background:rgba(212,175,55,.12);border:1px solid rgba(212,175,55,.18);}

.table{--bs-table-bg:transparent;--bs-table-color:var(--att-text);}
.table thead th{color:var(--att-gold-light);background:rgba(212,175,55,.075);border-color:var(--att-border);}
.table tbody td,.table > :not(caption) > * > *{color:var(--att-text);background:transparent;border-color:var(--att-border);}
.table-hover > tbody > tr:hover > *{color:var(--att-text);background:rgba(212,175,55,.055);}

.form-label{color:#cbd5e1;}
.form-control,.form-select,.form-check-input,.input-group-text{color:var(--att-text);background-color:rgba(255,255,255,.045);border-color:var(--att-border);}
.form-control::placeholder{color:#64748b;}
.form-control:focus,.form-select:focus,.form-check-input:focus{color:var(--att-text);background-color:rgba(255,255,255,.065);border-color:var(--att-gold);box-shadow:var(--att-focus);}
.form-select option{color:var(--att-text);background:var(--att-surface-solid);}
.form-check-input:checked{background-color:var(--att-gold);border-color:var(--att-gold);}

.btn-primary,.btn-warning{color:var(--att-navy-900);background:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));border-color:transparent;box-shadow:0 10px 24px rgba(212,175,55,.16);}
.btn-primary:hover,.btn-primary:focus,.btn-warning:hover,.btn-warning:focus{color:var(--att-navy-900);background:linear-gradient(135deg,var(--att-gold-light),var(--att-gold));border-color:transparent;transform:translateY(-1px);box-shadow:0 14px 30px rgba(212,175,55,.24);}
.btn-outline-primary{color:var(--att-gold-light);border-color:rgba(212,175,55,.55);}
.btn-outline-primary:hover{color:var(--att-navy-900);background:var(--att-gold);border-color:var(--att-gold);}
.btn-light,.btn-outline-secondary{color:#e2e8f0;background:rgba(255,255,255,.05);border-color:var(--att-border);}
.btn-light:hover,.btn-outline-secondary:hover{color:var(--att-text);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);}

.text-dark{color:var(--att-text)!important;}
.text-muted{color:var(--att-muted)!important;}
.bg-light{background-color:rgba(255,255,255,.045)!important;}
.bg-white{background-color:rgba(255,255,255,.025)!important;}
.table-light{--bs-table-bg:rgba(212,175,55,.075);--bs-table-color:var(--att-gold-light);--bs-table-border-color:var(--att-border);}
.border,.border-top,.border-bottom{border-color:var(--att-border)!important;}

.dropdown-menu,.modal-content,.offcanvas,.toast{color:var(--att-text);background:var(--att-surface-solid);border:1px solid var(--att-border);}
.dropdown-item{color:#cbd5e1;}
.dropdown-item:hover,.dropdown-item:focus{color:var(--att-text);background:rgba(212,175,55,.09);}
.modal-header,.modal-footer{border-color:var(--att-border);}
.btn-close{filter:invert(1) grayscale(1);}
.pagination .page-link{color:#cbd5e1;background:rgba(255,255,255,.045);border-color:var(--att-border);}
.pagination .page-link:hover,.pagination .active > .page-link{color:var(--att-navy-900);background:var(--att-gold);border-color:var(--att-gold);}

.footer{color:var(--att-muted);background:rgba(5,11,21,.92);border-color:var(--att-border);}
.footer-logo{color:var(--att-text);}
.footer-emblem{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;padding:0 6px;border-radius:8px;color:var(--att-navy-900);background:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));font-size:10px;font-weight:800;letter-spacing:.5px;}
.footer-chip{color:#cbd5e1;background:rgba(255,255,255,.04);border:1px solid var(--att-border);}
.loading-overlay{background:rgba(5,11,21,.82);}

@media (max-width:991.98px){.topbar{background:rgba(11,21,38,.94);}}
@media print{body{color-scheme:light;background:#fff!important;color:#111!important;}body::before{display:none!important;}}

.guest-layout{margin-left:0;padding:0;}
.guest-layout .page-content{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;}
.guest-layout .container{max-width:760px;}
.guest-layout .card{border-radius:var(--att-radius-xl);box-shadow:var(--att-shadow-lg);}
.guest-brand{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:28px;text-align:left;}
.guest-brand-emblem{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:18px;color:var(--att-navy-900);background:linear-gradient(135deg,var(--att-gold),var(--att-gold-light));box-shadow:0 16px 36px rgba(212,175,55,.25);font-weight:800;letter-spacing:1px;}
.guest-brand-name{color:var(--att-text);font-size:24px;font-weight:800;letter-spacing:3px;}
.guest-brand-tagline{margin-top:4px;color:var(--att-muted);font-size:10px;font-weight:600;letter-spacing:2px;}
.module-form-card{width:100%;max-width:680px;}

.voucher-generator-form{max-width:1440px;margin:0 auto;}
.generation-status{padding:22px;border-color:rgba(212,175,55,.24);}
.generation-status-header{display:flex;align-items:center;gap:15px;margin-bottom:18px;}
.generation-status-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:14px;color:var(--att-gold-light);background:rgba(212,175,55,.12);font-size:22px;}
.generation-status.is-running .generation-status-icon i{animation:spin 1.2s linear infinite;}
.generation-status.is-completed{border-color:rgba(34,197,94,.35);}
.generation-status.is-completed .generation-status-icon{color:#86efac;background:rgba(34,197,94,.13);}
.generation-status.is-failed{border-color:rgba(239,68,68,.38);}
.generation-status.is-failed .generation-status-icon{color:#fca5a5;background:rgba(239,68,68,.13);}
.generation-progress-track{height:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07);}
.generation-progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--att-gold),var(--att-gold-light));box-shadow:0 0 18px rgba(212,175,55,.28);transition:width .35s ease;}
.generation-status.is-completed .generation-progress-bar{background:linear-gradient(90deg,#16a34a,#86efac);}
.generation-status.is-failed .generation-progress-bar{background:linear-gradient(90deg,#b91c1c,#f87171);}
.generation-status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;}
.generation-status-grid>div{min-width:0;padding:12px 14px;border:1px solid var(--att-border);border-radius:12px;background:rgba(255,255,255,.035);}
.generation-status-grid span{display:block;margin-bottom:4px;color:var(--att-muted);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.generation-status-grid strong{display:block;color:var(--att-text);font-size:14px;overflow-wrap:anywhere;}
.generation-status-message{margin-top:16px;padding:12px 14px;border-radius:12px;color:#cbd5e1;background:rgba(255,255,255,.035);font-size:13px;}
.generation-status-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.voucher-generator-grid{align-items:stretch;}
.voucher-form-card{overflow:hidden;}
.voucher-form-card .card-header{min-height:58px;display:flex;align-items:center;}
.voucher-form-card .card-body{display:flex;flex-direction:column;}
.router-storage-safety{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:24px;padding:16px 18px;border:1px solid var(--att-border);border-radius:var(--att-radius-lg);background:linear-gradient(145deg,rgba(23,35,58,.94),rgba(15,23,42,.9));box-shadow:var(--att-shadow-sm);transition:border-color .2s ease,background .2s ease;}
.router-storage-safety-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;color:var(--att-gold-light);background:rgba(212,175,55,.12);font-size:21px;}
.router-storage-safety.is-checking .router-storage-safety-icon i{animation:spin 1.2s linear infinite;}
.router-storage-safety-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--att-text);font-size:14px;}
.router-storage-safety-heading span{flex-shrink:0;color:var(--att-muted);font-size:12px;font-weight:700;}
.router-storage-safety-message{margin-top:4px;color:var(--att-muted);font-size:12px;line-height:1.5;}
.router-storage-meter{height:6px;margin-top:10px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07);}
.router-storage-meter-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--att-gold),var(--att-gold-light));transition:width .35s ease,background .2s ease;}
.router-storage-safety.is-safe{border-color:rgba(34,197,94,.3);background:linear-gradient(145deg,rgba(20,54,47,.42),rgba(15,23,42,.92));}
.router-storage-safety.is-safe .router-storage-safety-icon{color:#86efac;background:rgba(34,197,94,.13);}
.router-storage-safety.is-safe .router-storage-meter-fill{background:linear-gradient(90deg,#16a34a,#86efac);}
.router-storage-safety.is-warning{border-color:rgba(245,158,11,.38);}
.router-storage-safety.is-warning .router-storage-safety-icon{color:#fcd34d;background:rgba(245,158,11,.13);}
.router-storage-safety.is-warning .router-storage-meter-fill{background:linear-gradient(90deg,#d97706,#fcd34d);}
.router-storage-safety.is-blocked{border-color:rgba(239,68,68,.42);background:linear-gradient(145deg,rgba(69,26,35,.42),rgba(15,23,42,.92));}
.router-storage-safety.is-blocked .router-storage-safety-icon{color:#fca5a5;background:rgba(239,68,68,.13);}
.router-storage-safety.is-blocked .router-storage-meter-fill{background:linear-gradient(90deg,#b91c1c,#f87171);}
.voucher-batch-card{margin-top:24px;overflow:hidden;}
.voucher-batch-card .card-body{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(320px,1.25fr);gap:24px;align-items:end;}
.voucher-batch-card .form-text{margin-bottom:2px;}
.batch-preview{min-height:78px;padding:14px 16px;border:1px solid rgba(212,175,55,.22);border-radius:var(--att-radius);background:rgba(212,175,55,.065);}
.batch-preview-label{display:block;margin-bottom:6px;color:var(--att-muted);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.batch-preview-value{color:var(--att-gold-light);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;font-size:14px;font-weight:700;overflow-wrap:anywhere;}
.voucher-generator-actions{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:18px 20px;border:1px solid var(--att-border);border-radius:var(--att-radius-lg);background:linear-gradient(145deg,rgba(23,35,58,.92),rgba(15,23,42,.88));box-shadow:var(--att-shadow-sm);}
.voucher-action-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.voucher-action-title{color:var(--att-text);font-size:15px;font-weight:700;}
.voucher-action-subtitle{color:var(--att-muted);font-size:13px;}
.voucher-generate-button{min-width:310px;min-height:54px;flex-shrink:0;}

@media(max-width:991.98px){.voucher-batch-card .card-body{grid-template-columns:1fr;align-items:stretch;}.generation-status-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:767.98px){.voucher-generator-actions{align-items:stretch;flex-direction:column;padding:16px}.voucher-generate-button{width:100%;min-width:0}.voucher-action-copy{text-align:center}.generation-status{padding:16px}.generation-status-grid{grid-template-columns:1fr 1fr}.generation-status-actions .btn{width:100%;}.router-storage-safety{grid-template-columns:auto minmax(0,1fr);padding:15px}.router-storage-safety .btn{grid-column:1/-1;width:100%;}.router-storage-safety-heading{align-items:flex-start;flex-direction:column;gap:2px;}}
@media(max-width:575.98px){.guest-layout .page-content{padding:24px 14px;}.guest-brand{gap:12px}.guest-brand-emblem{width:52px;height:52px;border-radius:15px}.guest-brand-name{font-size:19px}.guest-brand-tagline{letter-spacing:1.3px}}