/* ==========================================================
   Wieka Link Manager
   Version : 1.0
   Author  : OpenAI
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#2563eb;
--primary2:#4f46e5;
--success:#10b981;
--danger:#ef4444;
--warning:#f59e0b;

--dark:#0f172a;

--gray:#64748b;

--light:#f8fafc;

--card:#ffffff;

--shadow:0 20px 60px rgba(15,23,42,.12);

--radius:20px;

--transition:.35s;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:'Poppins',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:#eef3f8;

min-height:100vh;

overflow-x:hidden;

color:#1e293b;

}

a{

text-decoration:none;

}

button{

border:none;

outline:none;

}

input{

outline:none;

}

.background-shape{

position:fixed;

width:900px;

height:900px;

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

border-radius:50%;

top:-400px;

right:-250px;

filter:blur(70px);

opacity:.35;

z-index:-2;

}

.background-shape::after{

content:"";

position:absolute;

width:650px;

height:650px;

background:#22c55e;

left:-280px;

bottom:-280px;

border-radius:50%;

opacity:.25;

filter:blur(70px);

}

.login-wrapper{

display:flex;

justify-content:center;

align-items:center;

min-height:100vh;

padding:40px;

}


.login-card{

width:470px;

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

backdrop-filter:blur(30px);

padding:45px;

border-radius:30px;

box-shadow:var(--shadow);

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

animation:fadeUp .8s ease;

}

.logo-circle{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

color:#fff;

box-shadow:

0 15px 30px rgba(37,99,235,.3);

}

.login-card h2{

font-weight:700;

font-size:28px;

margin-bottom:8px;

}

.login-card p{

font-size:14px;

color:#64748b;

}

label{

font-weight:600;

font-size:14px;

margin-bottom:8px;

display:block;

}

.input-group{

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 18px rgba(15,23,42,.05);

}

.input-group-text{

background:#fff;

border:none;

width:55px;

justify-content:center;

color:#2563eb;

}

.form-control{

border:none;

height:55px;

font-size:15px;

}

.form-control:focus{

box-shadow:none;

}

.input-group button{

width:60px;

background:#fff;

}

.login-btn{

width:100%;

height:58px;

border-radius:16px;

font-weight:600;

font-size:17px;

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

transition:.3s;

}

.login-btn:hover{

transform:translateY(-3px);

box-shadow:

0 20px 40px rgba(37,99,235,.35);

}

.copyright{

margin-top:35px;

text-align:center;

color:#94a3b8;

font-size:13px;

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(50px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(max-width:768px){

.login-card{

width:100%;

padding:30px;

border-radius:22px;

}

.logo-circle{

width:75px;

height:75px;

font-size:28px;

}

.login-card h2{

font-size:23px;

}

}

/* ======================================================
   GLASS EFFECT
====================================================== */

.login-card{

    position:relative;
    overflow:hidden;

}

.login-card::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

    top:-90px;

    right:-90px;

    filter:blur(10px);

}

.login-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(79,70,229,.06);

    left:-70px;

    bottom:-70px;

}

.form-control{

    transition:.35s;

}

.form-control:hover{

    background:#fbfcff;

}

.input-group{

    transition:.35s;

}

.input-group:hover{

    transform:translateY(-2px);

    box-shadow:

    0 18px 40px rgba(37,99,235,.10);

}

.input-group:focus-within{

    box-shadow:

    0 0 0 4px rgba(37,99,235,.12);

}

input[type="checkbox"]{

    accent-color:#2563eb;

    width:18px;

    height:18px;

    cursor:pointer;

}

a{

    color:#2563eb;

    transition:.3s;

}

a:hover{

    color:#4f46e5;

}

.login-btn{

    position:relative;

    overflow:hidden;

}

.login-btn::before{

    content:"";

    position:absolute;

    width:60px;

    height:220px;

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

    left:-100px;

    top:-40px;

    transform:rotate(25deg);

    transition:.6s;

}

.login-btn:hover::before{

    left:520px;

}

.logo-circle{

    animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

.background-shape{

animation:bgMove 18s linear infinite;

}

@keyframes bgMove{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:30px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

.loader{

width:45px;

height:45px;

border-radius:50%;

border:5px solid rgba(37,99,235,.2);

border-top:5px solid #2563eb;

animation:spin .8s linear infinite;

margin:auto;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.toast-success{

position:fixed;

right:25px;

top:25px;

padding:18px;

border-radius:16px;

background:#10b981;

color:#fff;

font-weight:600;

z-index:99999;

box-shadow:0 20px 40px rgba(0,0,0,.15);

animation:fadeUp .4s;

}

@media(max-width:992px){

.login-card{

width:430px;

padding:38px;

}

}

@media(max-width:768px){

body{

padding:25px;

}

.login-wrapper{

padding:0;

}

.login-card{

width:100%;

max-width:470px;

padding:35px;

border-radius:25px;

}

.logo-circle{

width:75px;

height:75px;

font-size:30px;

}

.login-card h2{

font-size:24px;

}

.login-btn{

height:55px;

}

}

/* ===============================
   Mobile
================================ */

@media (max-width:576px){

body{

padding:0;

}

.login-wrapper{

min-height:100vh;

padding:18px;

display:flex;

align-items:center;

justify-content:center;

}

.login-card{

width:100%;

max-width:360px;

padding:24px;

border-radius:22px;

box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.logo-circle{

width:58px;

height:58px;

font-size:22px;

margin-bottom:10px;

}

.login-card h2{

font-size:24px;

margin-bottom:4px;

}

.login-card p{

font-size:13px;

margin-bottom:18px;

}

label{

font-size:13px;

margin-bottom:6px;

}

.input-group{

margin-bottom:12px;

}

.form-control{

height:46px;

font-size:14px;

}

.input-group-text{

width:45px;

font-size:14px;

}

.login-btn{

height:48px;

font-size:15px;

margin-top:15px;

}

.copyright{

margin-top:18px;

font-size:12px;

}

}

@media(max-width:390px){

.login-card{

padding:22px;

}

.login-card h2{

font-size:20px;

}

.login-card p{

font-size:13px;

}

.login-btn{

height:50px;

}

}

body.dark{

background:#0f172a;

}

body.dark .login-card{

background:#1e293b;

color:#fff;

}

body.dark .form-control{

background:#334155;

color:#fff;

}

body.dark .input-group-text{

background:#334155;

color:#fff;

}

/* ===============================
   Android 360px
================================ */

@media (max-width:390px){

.login-card{

padding:20px;

max-width:330px;

}

.logo-circle{

width:52px;

height:52px;

font-size:20px;

}

.login-card h2{

font-size:21px;

}

.login-card p{

font-size:12px;

}

label{

font-size:12px;

}

.form-control{

height:44px;

font-size:13px;

}

.login-btn{

height:46px;

font-size:14px;

}

}

/*======================================
APP LAYOUT
======================================*/

.app-wrapper{

display:flex;

min-height:100vh;

background:#f4f7fe;

}


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

.sidebar{

width:280px;

background:#ffffff;

box-shadow:0 15px 40px rgba(15,23,42,.08);

padding:25px;

display:flex;

flex-direction:column;

position:fixed;

left:0;

top:0;

bottom:0;

z-index:100;

transition:.3s;

}


.logo{

display:flex;

align-items:center;

gap:15px;

margin-bottom:40px;

}

.logo-icon{

width:55px;

height:55px;

border-radius:18px;

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

display:flex;

justify-content:center;

align-items:center;

color:#fff;

font-size:22px;

}

.logo-text h4{

font-size:20px;

font-weight:700;

margin:0;

}

.logo-text span{

font-size:13px;

color:#94a3b8;

}

.sidebar-menu{

display:flex;

flex-direction:column;

gap:8px;

}

.sidebar-menu a{

display:flex;

align-items:center;

gap:14px;

padding:14px 18px;

border-radius:16px;

color:#475569;

font-weight:500;

transition:.3s;

}

.sidebar-menu a i{

width:22px;

font-size:18px;

}

.sidebar-menu a:hover{

background:#2563eb;

color:#fff;

transform:translateX(5px);

}

.sidebar-menu .active{

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color:#fff;

}

.content{

margin-left:180px;

width:calc(100% - 200px);

padding:30px;

overflow-x:auto;

transition:.35s;

}

@media(max-width:992px){

.sidebar{

left:-300px;

}

.sidebar.show{

left:0;

}

.content{

margin-left:0;

padding:20px;

}

}


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

.topbar{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:30px;

gap:20px;

flex-wrap:wrap;

}

.search-box{

background:#fff;

height:55px;

border-radius:16px;

display:flex;

align-items:center;

padding:0 20px;

box-shadow:0 10px 30px rgba(0,0,0,.05);

flex:1;

max-width:500px;

}

.search-box i{

color:#64748b;

margin-right:12px;

}

.search-box input{

border:none;

outline:none;

width:100%;

background:transparent;

}

.topbar-right{

display:flex;

align-items:center;

gap:18px;

}

.icon-btn{

width:50px;

height:50px;

border-radius:16px;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

box-shadow:0 8px 25px rgba(0,0,0,.05);

transition:.3s;

cursor:pointer;

}

.icon-btn:hover{

background:#2563eb;

color:#fff;

}


.profile{

display:flex;

align-items:center;

gap:15px;

background:#fff;

padding:8px 15px;

border-radius:16px;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.profile img{

width:48px;

height:48px;

border-radius:50%;

object-fit:cover;

}

.profile h6{

margin:0;

font-weight:600;

}

.profile span{

font-size:13px;

color:#94a3b8;

}


.menu-toggle{

display:none;

width:50px;

height:50px;

border-radius:16px;

background:#fff;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}


@media(max-width:992px){

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

}

.search-box{

order:3;

width:100%;

max-width:100%;

}

}

/*==========================
CARD
===========================*/

.card-stat{

background:#fff;

padding:25px;

border-radius:22px;

display:flex;

justify-content:space-between;

align-items:center;

box-shadow:0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.card-stat:hover{

transform:translateY(-6px);

}

.card-stat h3{

font-size:34px;

font-weight:700;

margin:0;

}

.card-stat p{

margin-top:10px;

color:#64748b;

}

.card-stat i{

font-size:40px;

color:#2563eb;

}

/* =========================================
   MOBILE FIRST (<= 768px)
========================================= */

@media (max-width:768px){

.sidebar{

position:fixed;

left:-280px;

top:0;

width:260px;

height:100vh;

z-index:9999;

transition:.35s ease;

box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.sidebar.show{

left:0;

}

.content{

margin-left:0 !important;

padding:15px;

width:100%;

}

.topbar{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.search-box{

width:100%;

max-width:100%;

order:3;

}

.topbar-right{

margin-left:auto;

}

.profile{

padding:6px 10px;

}

.profile h6,

.profile span{

display:none;

}

.profile img{

width:40px;

height:40px;

}

.card-stat{

padding:20px;

margin-bottom:15px;

}

.card-stat h3{

font-size:28px;

}

.card-stat i{

font-size:32px;

}

.row{

margin-left:0;

margin-right:0;

}

.col-xl-3,

.col-lg-3,

.col-md-6,

.col-sm-6{

padding:0;

width:100%;

}

}

/* =========================================
   SMALL PHONE
========================================= */

@media (max-width:480px){

.logo-text{

display:none;

}

.sidebar{

width:240px;

}

.topbar{

margin-bottom:20px;

}

.search-box{

height:48px;

}

.search-box input{

font-size:14px;

}

.icon-btn{

width:42px;

height:42px;

}

.menu-toggle{

width:42px;

height:42px;

}

.content{

padding:12px;

}

.card-stat{

border-radius:18px;

padding:18px;

}

.card-stat h3{

font-size:24px;

}

.card-stat p{

font-size:14px;

}

}

.page-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

flex-wrap:wrap;

gap:15px;

}

.card-modern{

background:#fff;

padding:25px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.05);

width:100%;

overflow:hidden;

}

.table thead{

background:#f8f9fb;

}

.table td{

vertical-align:middle;

}

.table a{

font-weight:600;

text-decoration:none;

}

.modal-content{

border-radius:20px;

border:none;

}

.modal-header{

border:none;

}

.modal-footer{

border:none;

}


/* ==========================================
   RESPONSIVE TABLE
========================================== */

.table-responsive{

    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;

    border-radius:20px;

}

.table{

    width:100%;
    min-width:1100px;

}

.table th,
.table td{

    white-space:nowrap;
    vertical-align:middle;

}

.table thead{

    background:#f8fafc;

}

.card-modern{

    width:100%;
    overflow:hidden;

}


/*==============================
TABLE RESPONSIVE
===============================*/

.table-responsive{

width:100%;

overflow-x:auto;

overflow-y:hidden;

-webkit-overflow-scrolling:touch;

}

.table{

width:100%;

min-width:1200px;

}

.table th{

white-space:nowrap;

font-weight:600;

}

.table td{

white-space:nowrap;

vertical-align:middle;

}

@media(max-width:992px){

.content{

margin-left:0;

width:100%;

padding:18px;

}

.table{

min-width:900px;

}

}

@media(max-width:576px){

.table{

min-width:800px;

}

.card-modern{

padding:15px;

}

}

/* ===== MODAL ===== */

.modal-content{

border:none;

border-radius:22px;

overflow:hidden;

box-shadow:0 30px 80px rgba(0,0,0,.15);

}

.modal-header{

padding:28px;

background:#fff;

}

.modal-body{

padding:30px;

}

.form-label{

font-weight:600;

font-size:14px;

margin-bottom:10px;

}

.modern-input{

height:52px;

border-radius:12px;

border:1px solid #e5e7eb;

}

.modern-input:focus{

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.1);

}

.input-group-text{

background:#f8fafc;

border-radius:12px 0 0 12px;

border:1px solid #e5e7eb;

color:#2563eb;

}


/* Date */

input[type=datetime-local].modern-input{

padding-right:15px;

}

/* Password Button */

.input-group button{

border-radius:0 12px 12px 0;

border:1px solid #e5e7eb;

background:#fff;

}

.input-group button:hover{

background:#2563eb;

color:#fff;

}

.input-group button i{

font-size:15px;

}