/* ==========================================
   Atlas Dashboard
   Reset & Base Styles
========================================== */

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

html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    min-height:100vh;
    background:var(--background);
    color:var(--text);
    overflow-x:hidden;
    transition:background .3s,color .3s;
}

img{
    display:block;
    max-width:100%;
}

svg{
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

ul,
ol{
    list-style:none;
}

button{
    border:none;
    background:none;
    cursor:pointer;
    outline:none;
    transition:var(--transition);
}

input,
textarea,
select{
    border:none;
    outline:none;
    background:none;
    font:inherit;
    color:inherit;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    text-align:left;
}

hr{
    border:none;
    border-top:1px solid var(--border);
}

/* ==============================
   Selection
============================== */

::selection{
    background:var(--primary);
    color:#fff;
}

/* ==============================
   Focus
============================== */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(20,184,166,.25);
    outline-offset:2px;
}

/* ==============================
   Cards
============================== */

.card{

    background:var(--card-bg);

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

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

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-4px);

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

}

/* ==============================
   Buttons
============================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    height:44px;

    padding:0 20px;

    border-radius:14px;

    font-weight:600;

    transition:.25s;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

}

.btn-secondary{

    background:var(--surface);

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

}

.btn-secondary:hover{

    background:var(--surface-hover);

}

/* ==============================
   Inputs
============================== */

.input{

    width:100%;

    height:48px;

    background:var(--surface);

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

    border-radius:14px;

    padding:0 16px;

    transition:.25s;

}

.input:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(20,184,166,.12);

}

/* ==============================
   Scrollbar
============================== */

::-webkit-scrollbar{

    width:10px;

    height:10px;

}

::-webkit-scrollbar-thumb{

    background:#CBD5E1;

    border-radius:50px;

}

[data-theme="dark"] ::-webkit-scrollbar-thumb{

    background:#324453;

}

::-webkit-scrollbar-track{

    background:transparent;

}

/* ==============================
   Helpers
============================== */

.hidden{

    display:none !important;

}

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.w-100{

    width:100%;

}

.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}

.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}

.text-center{

    text-align:center;

}

.round{

    border-radius:50%;

}

.shadow{

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

}

.fade{

    animation:fade .35s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:none;

    }

}