/* ============================================================
 * Quản lý thiết bị (QLTB) - đồng bộ design tokens với QLTT
 * ============================================================ */

.qltb-wrap{
    font-family:'Roboto', Arial, 'Segoe UI', 'Helvetica Neue', sans-serif;
    color:#000;
    font-size:16px;
    line-height:1.5;
}

/* ===== Auth Card (login + reset) ===== */
.qltb-auth-card{
    max-width:420px;
    margin:32px auto;
    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    padding:28px 24px;
    box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.qltb-auth-title{
    margin:0 0 20px;
    font-size:24px;
    color:#0a763c;
    display:flex;
    align-items:center;
    gap:10px;
    line-height:1;
}
.qltb-auth-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    color:#0a763c;
}

/* ===== Form ===== */
.qltb-form .qltb-field{margin-bottom:14px}
.qltb-form label{
    display:block;
    margin-bottom:4px;
    font-size:14px;
    color:#5f5f5f;
    font-weight:600;
}
.qltb-input{
    width:100%;
    padding:10px 12px;
    border:1px solid #e0e0e0;
    border-radius:6px;
    font-size:16px;
    font-family:inherit;
    box-sizing:border-box;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.qltb-input:focus{
    outline:none;
    border-color:#0a763c;
    box-shadow:0 0 0 3px rgba(10,118,60,0.12);
}
.qltb-captcha{display:flex;justify-content:center;margin:14px 0}

/* ===== Buttons ===== */
.qltb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border:1px solid transparent;
    border-radius:6px;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    line-height:1.4;
    transition:background 0.15s, border-color 0.15s;
    box-sizing:border-box;
}
.qltb-btn-primary{background:#0a763c;color:#fff;border-color:#0a763c}
.qltb-btn-primary:hover{background:#074a26;border-color:#074a26;color:#fff}
.qltb-btn-danger{background:#fff;color:#b50000;border-color:#b50000}
.qltb-btn-danger:hover{background:#b50000;color:#fff}
.qltb-btn-block{display:flex;width:100%}
.qltb-btn-sm{padding:6px 12px;font-size:14px}

.qltb-actions{margin-top:18px}
.qltb-aux{text-align:center;margin:14px 0 0;font-size:14px}
.qltb-aux a{color:#0a763c;text-decoration:none}
.qltb-aux a:hover{text-decoration:underline}

/* ===== Messages ===== */
.qltb-msg{
    padding:10px 14px;
    border-radius:6px;
    margin:12px 0;
    font-size:14px;
}
.qltb-msg-ok{background:#F2FBF3;color:#0a763c;border-left:4px solid #0a763c}
.qltb-msg-err{background:#fce4e4;color:#b50000;border-left:4px solid #b50000}

/* ===== Section title (cho [qltb_my_devices]) ===== */
.qltb-section-title{
    margin:0 0 12px;
    font-size:20px;
    color:#0a763c;
    display:flex;
    align-items:center;
    gap:8px;
    line-height:1;
}
.qltb-section-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    color:#0a763c;
}
.qltb-note{
    font-size:14px;
    color:#5f5f5f;
    margin-bottom:14px;
    line-height:1.5;
}
.qltb-empty{
    font-style:italic;
    color:#5f5f5f;
    text-align:center;
    padding:24px;
}

/* ===== Table (my devices) ===== */
.qltb-table{
    width:100%;
    border-collapse:collapse;
    border:1px solid #ececec;
    background:#fff;
    font-size:14px;
}
.qltb-table thead th{
    background:#F2FBF3;
    color:#0a763c;
    font-weight:600;
    text-align:left;
    padding:10px 12px;
    border-bottom:1px solid #ececec;
}
.qltb-table tbody td{
    padding:12px;
    border-bottom:1px solid #ececec;
    vertical-align:middle;
}
.qltb-table tbody tr:last-child td{border-bottom:none}
.qltb-table .qltb-row-current{background:#F2FBF3}

.qltb-meta{font-size:12px;color:#5f5f5f}
.qltb-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:10px;
    font-size:12px;
    font-weight:600;
    margin-left:6px;
}
.qltb-badge-ok{background:#dcedc8;color:#1b5e20}

/* ===== Mobile ===== */
@media (max-width:600px){
    .qltb-auth-card{margin:16px;padding:20px 16px}
    .qltb-auth-title{font-size:20px}
    .qltb-table thead{display:none}
    .qltb-table tbody td{display:block;padding:6px 12px;border:none}
    .qltb-table tbody tr{border:1px solid #ececec;border-radius:8px;margin-bottom:10px;display:block;padding:8px 0}
    .qltb-table tbody td:before{
        content:attr(data-label);
        font-weight:600;
        color:#0a763c;
        display:block;
        font-size:12px;
        margin-bottom:2px;
    }
}