@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
text-decoration: none;
list-style: none;
}
body{
margin:0;
font-family: "Poppins", sans-serif;
}
/* ONLY LOGIN PAGE */
.login-page{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(135deg,#dfe9f3 0%,#c9d6ff 50%,#a1c4fd 100%);
}
.container{
position: relative;
width: 850px;
height: 550px;
background: #fff;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 30px rgba(0, 0, 0, .2);
overflow: hidden;
}
.container h1{
font-size: 36px;
margin: -10px 0;
}
.container p{
font-size: 14.5px;
margin: 15px 0;
}
form{ width: 100%; }
.form-box{
position: absolute;
right: 0;
width: 50%;
height: 100%;
background: #fff;
display: flex;
align-items: center;
color: #333;
text-align: center;
padding: 40px;
z-index: 1;
transition: .6s ease-in-out 1.2s, visibility 0s 1s;
}
.container.active .form-box{ right: 50%; }
.form-box.register{ visibility: hidden; }
.container.active .form-box.register{ visibility: visible; }
.input-box{
position: relative;
margin: 30px 0;
}
.input-box input{
width: 100%;
padding: 13px 50px 13px 20px;
background: #eee;
border-radius: 8px;
border: none;
outline: none;
font-size: 16px;
color: #333;
font-weight: 500;
}
.input-box input::placeholder{
color: #888;
font-weight: 400;
}
.input-box i{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
}
.forgot-link{ margin: -15px 0 15px; }
.forgot-link a{
font-size: 14.5px;
color: #333;
}
.btn{
width: 100%;
height: 48px;
background: #7494ec;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, .1);
border: none;
cursor: pointer;
font-size: 16px;
color: #fff;
font-weight: 600;
}
.social-icons{
display: flex;
justify-content: center;
}
.social-icons a{
display: inline-flex;
padding: 10px;
border: 2px solid #ccc;
border-radius: 8px;
font-size: 24px;
color: #333;
margin: 0 8px;
}
.toggle-box{
position: absolute;
width: 100%;
height: 100%;
}
.toggle-box::before{
content: '';
position: absolute;
left: -250%;
width: 300%;
height: 100%;
background: #7494ec;
/* border: 2px solid red; */
border-radius: 150px;
z-index: 2;
transition: 1.8s ease-in-out;
}
.container.active .toggle-box::before{ left: 50%; }
.toggle-panel{
position: absolute;
width: 50%;
height: 100%;
/* background: seagreen; */
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
transition: .6s ease-in-out;
}
.toggle-panel.toggle-left{ 
left: 0;
transition-delay: 1.2s; 
}
.container.active .toggle-panel.toggle-left{
left: -50%;
transition-delay: .6s;
}
.toggle-panel.toggle-right{ 
right: -50%;
transition-delay: .6s;
}
.container.active .toggle-panel.toggle-right{
right: 0;
transition-delay: 1.2s;
}
.toggle-panel p{ margin-bottom: 20px; }
.toggle-panel .btn{
width: 160px;
height: 46px;
background: transparent;
border: 2px solid #fff;
box-shadow: none;
}
@media screen and (max-width: 650px){
.container{ height: calc(100vh - 40px); }
.form-box{
bottom: 0;
width: 100%;
height: 70%;
}
.container.active .form-box{
right: 0;
bottom: 30%;
}
.toggle-box::before{
left: 0;
top: -270%;
width: 100%;
height: 300%;
border-radius: 20vw;
}
.container.active .toggle-box::before{
left: 0;
top: 70%;
}
.container.active .toggle-panel.toggle-left{
left: 0;
top: -30%;
}
.toggle-panel{ 
width: 100%;
height: 30%;
}
.toggle-panel.toggle-left{ top: 0; }
.toggle-panel.toggle-right{
right: 0;
bottom: -30%;
}
.container.active .toggle-panel.toggle-right{ bottom: 0; }
}
.logo-img{
max-width:380px;
margin-bottom: 65px;
}
@media screen and (max-width: 400px){
.form-box { padding: 20px; }
.toggle-panel h1{font-size: 30px; }
}
/* Login Page CSS End */
/* sidebar Page CSS start */
/* SIDEBAR */
.sidebar{
width:260px;
height:100vh;
position:fixed;
left:0;
top:0;
background:#ffffff;
border-right:1px solid #e5e7eb;
display:flex;
flex-direction:column;
font-family:'Poppins',sans-serif;
}
/* LOGO */
.sidebar-header{
padding:20px;
border-bottom:1px solid #eee;
}
.logo{
display:flex;
align-items:center;
text-decoration:none;
}
.sidebar-logo{
width:35px;
}
.logo-text{
font-size:18px;
font-weight:600;
color:#333;
margin-left:10px;
}
/* SIDEBAR */
.sidebar {
    width: 250px;
    height: 100vh;
    background: #fff;
    border-right: 1px solid #eee;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* COLLAPSE */
body.sidebar-collapsed .sidebar {
    width: 70px;
}

/* MENU */
.sidebar-menu {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    flex: 1;
}

/* MENU ITEM */
.menu-item {
    margin: 4px 0;
}

/* MENU LINK */
.menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 8px;
}

/* LEFT SIDE (ICON + TEXT) */
.menu-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ICON */
.menu-left i {
    font-size: 18px;
}

/* HOVER EFFECT */
.menu-link:hover {
    background: #f3f4f6;
    color: #111827;
}

/* ACTIVE MENU */
.menu-item.active .menu-link {
    background: #a1c4fd;
    color: #fff;
}

/* COLLAPSE TEXT HIDE */
body.sidebar-collapsed .menu-link span {
    display: none;
}

/* CENTER ICON WHEN COLLAPSED */
body.sidebar-collapsed .menu-left {
    justify-content: center;
}

/* REMOVE RIGHT ICON (ARROW) */
body.sidebar-collapsed .menu-link i:last-child {
    display: none;
}
/* SUBMENU */
.submenu{
list-style:none;
padding-left:45px;
margin-top:5px;
display:none;
}
.has-sub.open .submenu{
display:block;
}
/* SUBMENU LINK */
.submenu li a{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
padding:8px 0;
color:#6b7280;
text-decoration:none;
}
.submenu li a:hover{
color:#4f46e5;
}
.submenu li.active a{
color:#4f46e5;
font-weight:500;
}
/* ARROW */
.arrow{
transition:0.3s;
}
.has-sub.open .arrow{
transform:rotate(180deg);
}
/* DIVIDER */
.sidebar-divider{
height:1px;
background:#e5e7eb;
margin:15px 0;
}
/* LOGOUT */
.logout-btn{
width:100%;
display:flex;
align-items:center;
gap:10px;
padding:12px 20px;
background:none;
border:none;
color:#ef4444;
cursor:pointer;
font-size:14px;
}
.logout-btn:hover{
background:#fee2e2;
}
/* Page Layout */
.main-wrapper{
margin-left:260px;
min-height:100vh;
background:#f5f6fa;
}
.content-area{
padding:25px;
}
.setting-icon{
font-size:18px;
animation: spin 3s linear infinite;
}
/* rotation animation */
/* ICON BASE */
.sidebar i{
font-size:18px;
transition:0.3s;
}
/* DASHBOARD PULSE */
.dashboard-icon{
animation:pulseDash 2s infinite;
}
@keyframes pulseDash{
0%{
transform:scale(1);
}
50%{
transform:scale(1.2);
}
100%{
transform:scale(1);
}
}
/* ACCESS CONTROL ROTATE */
.setting-icon{
animation:spin 6s linear infinite;
}
@keyframes spin{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
/* USERS FLOAT */
.user-icon{
animation:floatUser 3s ease-in-out infinite;
}
@keyframes floatUser{
0%{
transform:translateY(0px);
}
50%{
transform:translateY(-4px);
}
100%{
transform:translateY(0px);
}
}

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

.role-card{
border-radius:14px;
border:none;
}

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

.role-table th{
font-size:14px;
font-weight:600;
color:#495057;
}

.role-table td{
vertical-align:middle;
}

/* ================= PERMISSION SECTION ================= */

.permission-row{
display:flex;
align-items:flex-start;
gap:10px;
flex-wrap:wrap;
}

.permission-chips{
display:flex;
flex-wrap:wrap;
gap:8px;
max-width:750px;
}

/* ================= CHIP ================= */

.chip{
display:inline-flex;
align-items:center;
padding:5px 12px;
background:#f8f9fa;
border:1px solid #e4e6ea;
border-radius:30px;
font-size:13px;
cursor:pointer;
transition:.2s;
}

.chip:hover{
background:#eef3ff;
border-color:#c7d2fe;
}

.chip input{
margin-right:6px;
accent-color:#0d6efd;
transform:scale(.9);
}

/* ================= SAVE BUTTON ================= */

.save-btn{
height:32px;
width:36px;
display:flex;
align-items:center;
justify-content:center;
}

/* ================= ADD ROLE BUTTON ================= */

.role-add-btn{
background:#0d6efd;
color:#fff;
border:none;
padding:8px 18px;
font-size:14px;
font-weight:500;
border-radius:8px;
display:flex;
align-items:center;
gap:6px;
box-shadow:0 3px 10px rgba(0,0,0,0.12);
transition:.25s;
}

.role-add-btn:hover{
background:#0b5ed7;
transform:translateY(-1px);
}

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

.role-modal{
border-radius:14px;
border:none;
overflow:hidden;
}

.role-modal-header{
background:#0d6efd;
color:#fff;
padding:16px 20px;
border-bottom:none;
}

/* ================= INPUT ================= */

.role-input{
height:44px;
border-radius:8px;
border:1px solid #dee2e6;
}

.role-input:focus{
border-color:#0d6efd;
box-shadow:0 0 0 0.1rem rgba(13,110,253,.15);
}

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

.role-btn{
padding:8px 18px;
border-radius:8px;
font-size:14px;
}

.role-btn-primary{
background:#0d6efd;
color:white;
border:none;
}

.role-btn-primary:hover{
background:#0b5ed7;
}

.role-btn-light{
background:#f1f3f5;
border:none;
}
.table td{
vertical-align:middle;
}

.btn-outline-primary i,
.btn-outline-danger i{
font-size:14px;
}