@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

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

:root{
    --primary: #3b82f6;
    --primary-hover: #2563eb;

    --success: #22c55e;
    --danger: #ef4444;
    --warning: #f59e0b;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;

    --transition: .25s ease;

    --shadow-sm: 0 4px 10px rgba(0,0,0,.08);
    --shadow: 0 10px 30px rgba(0,0,0,.12);
    --shadow-lg: 0 20px 60px rgba(0,0,0,.18);

    --navbar-height: 72px;
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    opacity:1;

    transition:
        background-color .3s ease,
        color .3s ease;
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:20px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

/* =========================================================
   TEMA ESCURO
========================================================= */

[data-bs-theme="dark"]{
    --bs-body-bg: #0b1120;
    --bs-body-color: #e5e7eb;
    --bs-border-color: rgba(255,255,255,.08);
    --bs-tertiary-bg: #111827;
    --bs-emphasis-color: #ffffff;

    --card-bg: rgba(17,24,39,.75);
    --input-bg: rgba(255,255,255,.03);
    --dropdown-bg: rgba(17,24,39,.96);
    --hover-bg: rgba(255,255,255,.05);
}

/* =========================================================
   TEMA CLARO
========================================================= */

[data-bs-theme="light"]{
    --bs-body-bg: #f8fafc;
    --bs-body-color: #0f172a;
    --bs-border-color: rgba(15,23,42,.08);
    --bs-tertiary-bg: #ffffff;
    --bs-emphasis-color: #020617;

    --card-bg: rgba(255,255,255,.88);
    --input-bg: rgba(255,255,255,.75);
    --dropdown-bg: rgba(255,255,255,.96);
    --hover-bg: rgba(15,23,42,.04);
}

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

body{
    background:
        radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 25%),
        radial-gradient(circle at bottom right, rgba(99,102,241,.08), transparent 25%),
        var(--bs-body-bg);

    color:var(--bs-body-color);
}

/* =========================================================
   NAVBAR
========================================================= */

.navbar{
    min-height:var(--navbar-height);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    background: rgba(15,23,42,.70) !important;

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

    transition:var(--transition);

    z-index:1050;
}

[data-bs-theme="light"] .navbar{
    background: rgba(255,255,255,.72) !important;
}

.navbar-brand img{
    max-height:200px;

    transition:
        transform .25s ease,
        opacity .25s ease;
}

.navbar-brand:hover img{
    transform:scale(1.04);
    opacity:.95;
}

/* NAVBAR TOGGLER */

.navbar-toggler{
    border:none !important;
    box-shadow:none !important;
    padding:.5rem;
    border-radius:12px;
}

.navbar-toggler:hover{
    background:var(--hover-bg);
}

/* =========================================================
   AVATAR
========================================================= */

.avatar-img{
    width:42px;
    height:42px;

    object-fit:cover;

    border-radius:50%;

    border:2px solid rgba(255,255,255,.10);

    transition:var(--transition);
}

.avatar-img:hover{
    transform:scale(1.05);
}

.avatar-wrapper{
    position:relative;
}

.online-indicator{
    position:absolute;

    width:12px;
    height:12px;

    background:var(--success);

    border-radius:50%;

    bottom:1px;
    right:1px;

    border:2px solid var(--bs-body-bg);
}

/* =========================================================
   DROPDOWN
========================================================= */

.dropdown-menu{
    border:none;

    border-radius:var(--radius);

    background:var(--dropdown-bg);

    backdrop-filter:blur(18px);

    padding:.7rem;

    min-width:260px;

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

    animation:fadeUp .22s ease;
}

.dropdown-divider{
    opacity:.08;
}

.dropdown-item{
    border-radius:12px;

    padding:.85rem .95rem;

    font-weight:500;

    display:flex;
    align-items:center;

    transition:var(--transition);
}

.dropdown-item:hover{
    background:var(--hover-bg);
    transform:translateX(2px);
}

.dropdown-item i{
    width:20px;
}

/* =========================================================
   ANIMAÇÕES
========================================================= */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes pulse{
    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

/* =========================================================
   BOTÕES
========================================================= */

.btn{
    min-height:48px;

    border-radius:14px;

    padding:.7rem 1.2rem;

    font-size:.95rem;
    font-weight:600;

    letter-spacing:.01em;

    transition:var(--transition);

    border:none;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn:active{
    transform:translateY(0);
}

/* PRIMARY */

.btn-primary{
    background:
        linear-gradient(
            135deg,
            var(--primary),
            #2563eb
        );

    box-shadow:
        0 10px 25px rgba(59,130,246,.25);
}

.btn-primary:hover{
    background:
        linear-gradient(
            135deg,
            #4f8dfd,
            #1d4ed8
        );

    box-shadow:
        0 16px 30px rgba(59,130,246,.35);
}

/* PRIMARY */

.btn-link{
    text-decoration: none;
}

.btn-link:hover{
    box-shadow:
        0 16px 30px rgba(59,130,246,.35);
}

/* OUTLINE */

.btn-outline-light{
    border:1px solid rgba(255,255,255,.10);
    background:transparent;
}

.btn-outline-light:hover{
    background:rgba(255,255,255,.05);
}

/* =========================================================
   MODAIS
========================================================= */

.modal.fade .modal-dialog{
    transform:scale(.96) translateY(10px);
}

.modal.show .modal-dialog{
    transform:scale(1) translateY(0);
}

.modal-dialog{
    transition:all .2s ease;
}

.modal-content{
    border:none;

    border-radius:var(--radius-lg);

    overflow:hidden;

    background:var(--card-bg);

    backdrop-filter:blur(20px);

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

.modal-header,
.modal-footer{
    border:none;
}

.modal-header{
    padding:1.5rem 1.5rem .5rem;
}

.modal-body{
    padding:1.5rem;
}

.modal-footer{
    padding:0 1.5rem 1.5rem;
}

/* =========================================================
   FORMULÁRIOS
========================================================= */

.form-control,
.form-select{
    min-height:56px;

    border-radius:14px;

    background:var(--input-bg);

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

    color:var(--bs-body-color);

    font-size:.96rem;

    transition:var(--transition);
}

.form-control:focus,
.form-select:focus{
    background:var(--input-bg);

    border-color:rgba(59,130,246,.65);

    box-shadow:
        0 0 0 4px rgba(59,130,246,.12);

    color:var(--bs-body-color);
}

.form-floating label{
    font-weight:500;
    color:#94a3b8;
}

.form-control::placeholder{
    color:#94a3b8;
}

/* INVALID */

.invalid-feedback{
    font-size:.82rem;
    margin-top:.35rem;
}

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

.card{
    border:none;

    border-radius:var(--radius);

    background:var(--card-bg);

    backdrop-filter:blur(14px);

    box-shadow:var(--shadow);

    overflow:hidden;
}

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

.table{
    vertical-align:middle;
}

.table thead th{
    border-bottom:1px solid var(--bs-border-color);
}

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

.spinner-border{
    width:1rem;
    height:1rem;

    border-width:.15rem;
}

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

a{
    text-decoration:none;
    transition:var(--transition);
}

a:hover{
    opacity:.92;
}

/* =========================================================
   UTILITÁRIOS
========================================================= */

.cursor-pointer{
    cursor:pointer;
}

.glass{
    background:var(--card-bg);
    backdrop-filter:blur(18px);
}

.shadow-soft{
    box-shadow:var(--shadow);
}

.radius{
    border-radius:var(--radius);
}

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

@media(max-width: 576px){

    .navbar{
        padding:.8rem 0;
    }

    .navbar-collapse{
        margin-top:1rem;

        padding:1rem;

        border-radius:18px;

        background:var(--card-bg);

        backdrop-filter:blur(18px);
    }

    .dropdown-menu{
        min-width:100%;
    }

    .modal-dialog{
        margin:0;
        min-height:100vh;

        display:flex;
        align-items:end;
    }

    .modal-content{
        border-radius:
            24px 24px 0 0;
    }
}

.material-symbols-rounded{
    font-variation-settings:
    'FILL' 1,
    'wght' 500,
    'GRAD' 0,
    'opsz' 24;

    vertical-align: middle;
    font-size: 22px;
}

.material-symbols-rounded{
    transition:.2s ease;
}

.btn:hover .material-symbols-rounded{
    transform:scale(1.08);
}

@media(max-width:576px){

    body{
        font-size:.94rem;
    }

    .navbar-brand img{
        max-height:44px;
    }

    .btn{
        width:100%;
    }

    .modal-body,
    .modal-header,
    .modal-footer{
        padding:1.2rem;
    }

    .dropdown-menu{
        padding:.55rem;
    }

    .form-control,
    .form-select{
        min-height:54px;
    }
}