/* SMP User Manage - Frontend Styles */
/* Enqueued via wp_head when shortcodes are rendered */

.smp-wrap {
    max-width: 480px;
    margin: 0 auto;
    font-family: inherit;
}

.smp-form {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.smp-field {
    margin-bottom: 18px;
}
.smp-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}
.smp-field input[type="text"],
.smp-field input[type="email"],
.smp-field input[type="password"],
.smp-field input[type="url"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
    transition: border-color .2s;
}
.smp-field input:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 2px rgba(34,113,177,.15);
}
.smp-field-check label { font-weight: normal; display: flex; align-items: center; gap: 6px; }

.smp-btn {
    display: inline-block;
    padding: 11px 24px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background .2s, opacity .2s;
}
.smp-btn-primary  { background: #2271b1; color: #fff; }
.smp-btn-primary:hover  { background: #135e96; color: #fff; }
.smp-btn-secondary { background: #f0f0f1; color: #3c434a; border: 1px solid #ccc; margin-left: 8px; }
.smp-btn-secondary:hover { background: #dcdcde; }

.smp-links { margin-top: 14px; font-size: 13px; }
.smp-links a { color: #2271b1; text-decoration: none; }
.smp-links a:hover { text-decoration: underline; }

/* Alerts */
.smp-alert {
    padding: 12px 16px;
    border-radius: 5px;
    margin-bottom: 18px;
    font-size: 14px;
}
.smp-alert-error   { background: #ffeef0; border: 1px solid #f5a7a7; color: #9e2b2b; }
.smp-alert-success { background: #edfaed; border: 1px solid #8bc48b; color: #1a5c1a; }

.smp-info { font-size: 15px; }

/* Account page */
.smp-account-wrap .smp-form { max-width: 520px; }

/* ---- Logged-in notice (hiển thị trên trang login khi đã đăng nhập) ---- */
.smp-logged-in-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 12px 16px;
    background: #f0f6fc;
    border: 1px solid #c3d9f0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}
.smp-notice-text { color: #1d3557; }
.smp-notice-sep  { color: #aaa; }
.smp-notice-link {
    color: #2271b1;
    text-decoration: none;
    white-space: nowrap;
}
.smp-notice-link:hover { text-decoration: underline; }
.smp-notice-logout { color: #b32d2e; }
.smp-notice-logout:hover { color: #8a1e1e; }

/* ---- Avatar Upload Block ---- */
.smp-avatar-block {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}
.smp-avatar-preview {
    flex-shrink: 0;
}
.smp-avatar-preview img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
    display: block;
}
.smp-avatar-actions {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.smp-avatar-actions form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.smp-avatar-choose-btn {
    cursor: pointer;
    display: inline-block;
}
.smp-btn-danger-outline {
    background: #fff;
    color: #b32d2e;
    border: 1px solid #b32d2e;
}
.smp-btn-danger-outline:hover {
    background: #b32d2e;
    color: #fff;
}
.smp-avatar-hint {
    width: 100%;
    margin: 4px 0 0;
    font-size: 12px;
    color: #888;
}

/* ============================================================
 * Reset / Forgot Password Form
 * ============================================================ */

/* Form header */
.smp-form-header {
    text-align: center;
    margin-bottom: 24px;
}
.smp-form-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 10px;
}
.smp-form-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #1d2327;
}
.smp-form-desc {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Alert with icon */
.smp-alert-icon {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.smp-alert-ico {
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Full width button */
.smp-btn-full { width: 100%; justify-content: center; }
.smp-btn-sm   { padding: 7px 16px; font-size: 13px; }

/* Input wrap (for toggle password button) */
.smp-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.smp-input-wrap input {
    flex: 1;
    padding-right: 42px !important;
}
.smp-toggle-pass {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 16px;
    line-height: 1;
    color: #888;
    transition: color .2s;
}
.smp-toggle-pass:hover { color: #333; }

/* Password strength bar */
.smp-strength-bar {
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}
.smp-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .3s, background .3s;
}
.smp-strength-label,
.smp-match-label {
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
    display: block;
    min-height: 18px;
    transition: color .2s;
}

/* Back link / form footer */
.smp-form-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.smp-back-link {
    font-size: 13px;
    color: #2271b1;
    text-decoration: none;
}
.smp-back-link:hover { text-decoration: underline; }

/* ================================================================
 * SMP User List – [smp_user_list]
 * ================================================================ */
.smp-ul-wrap { font-size:15px; }

.smp-ul-filter { display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px; }
.smp-ul-search-input,.smp-ul-role-select { padding:8px 12px;border:1px solid #ccc;border-radius:5px;font-size:14px; }
.smp-ul-search-input { min-width:200px; }
.smp-ul-summary { color:#666;font-size:13px;margin:0 0 10px; }

/* Table */
.smp-ul-table-wrap { overflow-x:auto; }
.smp-ul-table { width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;font-size:14px; }
.smp-ul-table thead th { background:#f6f7f7;padding:10px 14px;text-align:left;font-weight:600;color:#333;border-bottom:1px solid #e5e7eb;font-size:13px; }
.smp-ul-table tbody td { padding:10px 14px;border-bottom:1px solid #f0f0f0;vertical-align:middle; }
.smp-ul-table tbody tr:last-child td { border-bottom:none; }
.smp-ul-table tbody tr:hover td { background:#f9fafb; }
.smp-ul-row-active td { background:#f0f6fc !important; }
.smp-ul-member { display:flex;align-items:center;gap:10px; }
.smp-ul-avatar { width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid #eee;flex-shrink:0; }
.smp-ul-name { font-weight:600;color:#1a1a1a; }
.smp-ul-login { color:#888;font-size:12px; }
.smp-ul-num,.smp-ul-date { color:#888;font-size:13px; }
.smp-ul-role-badge { display:inline-block;padding:2px 8px;background:#e8f4fd;color:#2271b1;border-radius:20px;font-size:12px;font-weight:600; }

/* Buttons */
.smp-ul-actions { white-space:nowrap; }
.smp-ul-btn { display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid transparent;text-decoration:none;margin-right:4px;transition:all .15s; }
.smp-ul-btn-edit { background:#f0f6fc;color:#2271b1;border-color:#2271b1; }
.smp-ul-btn-edit:hover,.smp-ul-btn-edit.active { background:#2271b1;color:#fff; }
.smp-ul-btn-delete { background:#fff0f0;color:#b32d2e;border-color:#b32d2e;border:none; }
.smp-ul-btn-delete:hover { background:#b32d2e;color:#fff; }

/* Modal overlay */
.smp-ul-modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px; }
.smp-ul-modal-box { background:#fff;border-radius:10px;padding:28px 32px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px rgba(0,0,0,.25);position:relative; }
.smp-ul-modal-title { margin:0 0 18px;font-size:17px;color:#2271b1;font-weight:700; }
.smp-ul-form-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media(max-width:480px){ .smp-ul-form-grid{grid-template-columns:1fr;} .smp-ul-modal-box{padding:18px 16px;} }

/* Pagination */
.smp-ul-pagination { display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px; }
.smp-ul-page-btn { display:inline-block;padding:6px 12px;border:1px solid #ddd;border-radius:4px;color:#333;text-decoration:none;font-size:13px;background:#fff;transition:all .15s; }
.smp-ul-page-btn:hover { background:#f0f0f0; }
.smp-ul-page-btn.active { background:#2271b1;color:#fff;border-color:#2271b1; }
.smp-ul-page-dots { color:#999;padding:6px 4px; }