@font-face {
    font-family: 'Lato';
    src: url('../fonts/lato/Lato-Regular.ttf?c6fe79dcef1ba0b89a6304b393277538') format('truetype'),
    url('../fonts/lato/Lato-Regular.ttf?c6fe79dcef1ba0b89a6304b393277538') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root{
    --bg-0:#f6f7fb;
    --bg-1:#ffffff;
    --panel:rgba(15,23,42,0.04);
    --panel-border:rgba(15,23,42,0.10);

    --accent-1:#6d28d9; /* adjust if you want */
    --accent-2:#0891b2;
    --accent-3:#e11d48;

    --text-hi:#0f172a;
    --text-lo:#475569;
    --input-bg: #fff;
    --table-action-btn-bg: #f9f9f9;
    --bg-custom-card: #f6f7fb;

    --btn-bg: #FFFFFF;
    --btn-border-color: rgba(37, 84, 194, 0.26);
    --btn--color: #454545;

    --radius:16px;
}

/* Dark theme overrides */
:root[data-bs-theme="dark"]{
    --bg-0:#0b0e14;
    --bg-1:#10141d;
    --panel:rgba(255,255,255,0.045);
    --panel-border:rgba(255,255,255,0.08);

    --accent-1:#7c5cff;
    --accent-2:#22d3ee;
    --accent-3:#ff6b9d;

    --text-hi:#eef0f6;
    --text-lo:#9aa3b5;
    --input-bg: #1d1d25;
    --table-action-btn-bg: #1d1d25;
    --bg-custom-card: #1d1d25;

    --btn-bg: #232323;
    --btn-border-color: rgb(128, 128, 128);
    --btn-color: #fff;
}

*{box-sizing:border-box;}
body{
    min-height:100vh;
    margin:0;
    font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    color:var(--text-hi);
    background:
        radial-gradient(1100px 600px at 12% -10%, rgba(124,92,255,.22), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(34,211,238,.16), transparent 55%),
        var(--bg-0);
    display:flex;
    align-items:center;
    justify-content:center;
}

.auth-wrap{ width:100%; max-width:420px; }

.brand{
    display:flex; align-items:center; justify-content:center; gap:.65rem;
    margin-bottom:1.75rem;
}
.brand-icon{
    width:36px; height:36px;
    border-radius:12px !important;
    box-shadow:0 8px 24px -6px rgba(124,92,255,.6);
}
.brand-text{ font-weight:700; font-size:1.2rem; }

.glass-card{
    background:var(--panel);
    border:1px solid var(--panel-border);
    border-radius:var(--radius);
    backdrop-filter:blur(18px);
    padding:2rem;
}

.card-title{ font-weight:700; font-size:1.3rem; margin-bottom:.25rem; }
.card-sub{ color:var(--text-lo); font-size:.88rem; margin-bottom:1.5rem; }

.form-label{ font-size:.84rem; color:var(--text-lo); font-weight:500; }
.input-icon-wrap{ position:relative; }
.input-icon-wrap i{
    position:absolute; left:14px; top:36%; transform:translateY(-50%);
    color:var(--text-lo);
}
.login-input-icon-wrap{ position:relative; }
.login-input-icon-wrap i{
    position:absolute; left:14px; top:47%; transform:translateY(-50%);
    color:var(--text-lo);
}

.register-input-icon-wrap{ position:relative; }
.register-input-icon-wrap i{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--text-lo);
}

.form-control{
    background:rgba(255,255,255,.03);
    border:1px solid var(--panel-border);
    color:var(--text-hi);
    padding:.62rem .9rem .62rem 2.4rem;
    border-radius:12px;
}
.form-control:focus{
    background:rgba(255,255,255,.05);
    color:var(--text-hi);
    border-color:var(--accent-1);
    box-shadow:0 0 0 3px rgba(124,92,255,.2);
}
.form-control::placeholder{ color:var(--text-lo); opacity:.7; }

.toggle-pass{
    position:absolute; right:44px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--text-lo); padding:0;
}

.form-check-input{
    background-color:rgba(255,255,255,.05);
    border-color:var(--panel-border);
}
.form-check-input:checked{
    background-color:var(--accent-1);
    border-color:var(--accent-1);
}

.btn-gradient{
    background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border:none;
    color:#fff;
    font-weight:600;
    border-radius:12px;
    padding:.65rem 1rem;
    transition:transform .15s ease, box-shadow .15s ease;
}
.btn-gradient:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 26px -8px rgba(124,92,255,.7);
    color:#fff;
}

.divider{
    display:flex; align-items:center; gap:.75rem;
    color:var(--text-lo); font-size:.78rem;
    margin:1.4rem 0;
}
.divider::before, .divider::after{
    content:""; flex:1; height:1px; background:var(--panel-border);
}

.btn-social{
    background:rgba(255,255,255,.03);
    border:1px solid var(--panel-border);
    color:var(--text-hi);
    border-radius:12px;
    padding:.55rem;
    font-size:.86rem;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-social:hover{ background:rgba(255,255,255,.07); color:var(--text-hi); }

.foot-link{ text-align:center; font-size:.86rem; color:var(--text-lo); margin-top:1.5rem; }
.foot-link a{ color:var(--accent-2); text-decoration:none; font-weight:600; }
.foot-link a:hover{ text-decoration:underline; }

a.back-home{
    display:inline-flex; align-items:center; gap:.4rem;
    color:var(--text-lo); text-decoration:none; font-size:.85rem;
    margin-bottom:1rem;
}
a.back-home:hover{ color:var(--text-hi); }
.brand-logo {
    height: 36px !important;
    border-radius: 12px;
}
.strength-bar{
    height:5px; border-radius:4px; background:rgba(255,255,255,.06);
    overflow:hidden; margin-top:.4rem;
}
.strength-fill{ height:100%; width:0%; transition:width .2s ease, background .2s ease; }

.content{ padding:1.5rem; flex:1; }
.page-title{ font-weight:700; font-size:1.4rem; margin-bottom:.2rem; }
.page-sub{ color:var(--text-lo); font-size:.9rem; margin-bottom:1.5rem; }
.glass-card{ background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius); backdrop-filter:blur(14px); }
.form-select, .form-control{ background:var(--panel); border:1px solid var(--panel-border); color:var(--text-hi); }
.form-select:focus, .form-control:focus{ background:var(--panel); color:var(--text-hi); border-color:var(--accent-1); box-shadow:0 0 0 3px rgba(124,92,255,.18); }
.form-label{ font-size:.84rem; color:var(--text-lo); font-weight:500; }
.footer-bar{ text-align:center; padding:1rem; color:var(--text-lo); font-size:.8rem; border-top:1px solid var(--panel-border); }
.mobile-toggle{ display:none; }
@media (max-width: 991.98px){ .sidebar{ display:none; } .mobile-toggle{ display:flex; } }
.offcanvas-nova{ width:264px; background:var(--bg-1); border-right:1px solid var(--panel-border); }

/* Profile-specific */
.profile-hero{
    position:relative;
    padding:2rem;
    overflow:hidden;
}
.profile-hero::before{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(124,92,255,.18), rgba(34,211,238,.10));
    z-index:0;
}
.profile-hero > *{ position:relative; z-index:1; }
.big-avatar{
    width:88px; height:88px; border-radius:20px;
    background:linear-gradient(135deg, var(--accent-2), var(--accent-1));
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.9rem; color:#fff;
    box-shadow:0 10px 30px -8px rgba(124,92,255,.6);
    position:relative;
}
.avatar-edit-btn{
    position:absolute; bottom:-4px; right:-4px;
    width:30px; height:30px; border-radius:9px;
    background:var(--bg-1); border:1px solid var(--panel-border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text-hi); font-size:.8rem;
}
.avatar-edit-btn:hover{ background:rgba(124,92,255,.25); }

.nav-tabs-nova{ border-bottom:1px solid var(--panel-border); gap:.25rem; }
.nav-tabs-nova .nav-link{
    border:none; color:var(--text-lo); font-size:.88rem; font-weight:500;
    padding:.7rem 1rem; border-radius:10px 10px 0 0;
    display:flex; align-items:center; gap:.5rem;
}
.nav-tabs-nova .nav-link i{ font-size:1rem; }
.nav-tabs-nova .nav-link.active{
    color:#fff; background:rgba(124,92,255,.16);
    border-bottom:2px solid var(--accent-1);
}

.section-block{ padding:1.75rem; }
.section-heading{ font-weight:700; font-size:1rem; margin-bottom:.2rem; }
.section-heading-sub{ color:var(--text-lo); font-size:.82rem; margin-bottom:1.25rem; }

.btn-gradient{
    background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
    border:none; color:#fff; font-weight:600; border-radius:12px;
    padding:.55rem 1.1rem;
    transition:transform .15s ease, box-shadow .15s ease;
}
.btn-gradient:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -8px rgba(124,92,255,.7); color:#fff; }
.btn-soft{ border-radius:9px; border:1px solid var(--panel-border); background:rgba(255,255,255,.04); color:var(--text-hi); }
.btn-soft:hover{ background:rgba(255,255,255,.08); color:var(--text-hi); }

.form-check-input{ background-color:rgba(255,255,255,.05); border-color:var(--panel-border); }
.form-check-input:checked{ background-color:var(--accent-1); border-color:var(--accent-1); }

.stat-mini{
    padding:1rem 1.1rem;
}
.stat-mini .val{ font-weight:700; font-size:1.3rem; }
.stat-mini .lbl{ color:var(--text-lo); font-size:.78rem; }

.required::after {
    content: " *";
    color: #bb2d3b;
    font-weight: 600;
    margin-left: 3px;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.bg-custom-card {
    background-color: var(--bg-custom-card);
}

.nowrap {
    white-space: nowrap !important;
}

.pointer {
    cursor: pointer;
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 12px;
}

.modal-header {
    border-bottom: none;
}

.modal-footer {
    border-top: none;
}

.fs-15 {
    font-size: 15px !important;
}


@media (max-width: 661.98px) {
    .content {padding: 0 !important;}
    .profile-hero{
        padding: 16px;
    }
}