/* ===========================
   GLOBAL
=========================== */
*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:"Segoe UI",Arial,sans-serif;
    background:linear-gradient(135deg,#2563eb,#1e40af);
}

/* ===========================
   AUTH CARD
=========================== */
.auth-wrapper{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
}

.auth-card{
    background:#fff;
    width:100%;
    max-width:420px;
    padding:35px;
    border-radius:16px;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

.brand{
    text-align:center;
    font-size:22px;
    font-weight:600;
    margin-bottom:25px;
    color:#1f2937;
}

label{
    font-weight:600;
    font-size:14px;
}

input{
    width:100%;
    padding:12px;
    margin-top:6px;
    margin-bottom:18px;
    border-radius:10px;
    border:1px solid #e5e7eb;
    font-size:14px;
    transition:0.2s;
}

input:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,0.2);
}

button{
    width:100%;
    padding:12px;
    border:none;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
}

button:hover{
    background:#1e40af;
}

button:disabled{
    opacity:0.6;
    cursor:not-allowed;
}

.auth-links{
    display:flex;
    justify-content:space-between;
    margin-top:15px;
    font-size:14px;
}

.auth-links a{
    text-decoration:none;
    color:#2563eb;
}

.auth-links a:hover{
    text-decoration:underline;
}

/* ===========================
   PASSWORD STRENGTH
=========================== */
.strength-text{
    font-size:12px;
    margin-top:4px;
}

.strength-weak{color:#dc3545;}
.strength-medium{color:#ffc107;}
.strength-strong{color:#28a745;}

/* ===========================
   TOAST PROFESSIONAL
=========================== */

/* ===========================
   MOBILE
=========================== */
@media(max-width:480px){
    .auth-card{
        padding:25px;
        border-radius:12px;
    }
}

@media(max-width:768px){
    .toast{
        bottom:10px;
        border-radius:18px;
    }
    .toast-content{
        font-size:16px;
    }
}
/* ================================
   DASHBOARD LAYOUT
================================ */

.layout{
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sidebar{
    width: 240px;
    background: #111827;
    color: white;
    padding: 20px;
    transition: 0.3s;
}

.sidebar .logo{
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
}

.menu{
    list-style: none;
    padding: 0;
}

.menu li{
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
}

.menu li:hover,
.menu li.active{
    background: #1f2937;
}

/* CONTENT */
.content{
    flex: 1;
    padding: 25px;
}

/* TOPBAR */
.topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.menu-toggle{
    display: none;
    background: #2563eb;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
}

/* GROUP BOX */
.group{
    background: white;
    padding: 20px;
    border-radius: 14px;
    margin-bottom: 25px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.group-title{
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* GRID INFO */
.group-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 15px;
}

.info-box{
    background: #f9fafb;
    padding: 12px;
    border-radius: 10px;
}

.info-box label{
    font-size: 12px;
    color: #6b7280;
}

.info-box div{
    font-weight: 600;
    margin-top: 5px;
}

/* TABLE */
.card-table{
    overflow-x: auto;
}

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

th,td{
    padding: 10px;
    text-align: left;
    font-size: 14px;
}

thead{
    background: #f3f4f6;
}

tbody tr{
    border-bottom: 1px solid #e5e7eb;
}

/* ================================
   MOBILE RESPONSIVE
================================ */

@media(max-width:768px){

    .sidebar{
        position: fixed;
        left: -240px;
        top: 0;
        height: 100%;
        z-index: 1000;
    }

    .sidebar.active{
        left: 0;
    }

    .menu-toggle{
        display: block;
    }

    .content{
        padding: 15px;
    }
}

/* Chuẩn Nhỏ – Trong Suốt – Gọn */
/* ===== Fix nút con mắt ===== */
.password-group{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:15px;
}

/* QUAN TRỌNG: bỏ width 100% */
.password-group input{
    flex:1;
    width:auto !important;
}

/* reset toàn bộ style button global */
.password-group .toggle-password{
    all:unset;

    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    font-size:18px;

    border-radius:8px;
}

.password-group .toggle-password:hover{
    background:#f2f2f2;
}

/* =========================
   TITLE LOGO (BIG IMAGE)
========================= */

/* LOGO GIỐNG WIDTH FORM */
.title-logo img{
    width:320px;   /* chỉnh nhỏ tại đây */
    height:auto;
    display:block;
    margin:0 auto 20px;
}

.title-logo img{
    width:100%;          /* chiếm hết chiều ngang container */
    height:auto;
}