/* ==== Reset nhẹ trong phạm vi frontend CRM ==== */
.nlh-crm-app, .nlh-crm-auth-wrap {
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.nlh-crm-app *, .nlh-crm-auth-wrap * {
    box-sizing: border-box;
}

/* ==== Auth (Đăng nhập/Đăng ký) ==== */
.nlh-crm-auth-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 24px 16px;
    background: #f4f5f7;
}
.nlh-crm-auth-box {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 32px 28px;
    width: 100%;
    max-width: 400px;
}
.nlh-crm-auth-logo {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #1e3a5f;
}
.nlh-crm-auth-notice {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}
.nlh-crm-auth-notice.is-error {
    background: #fdecea;
    color: #c62828;
}
.nlh-crm-auth-notice.is-success {
    background: #e8f5e9;
    color: #2e7d32;
}
.nlh-crm-auth-tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}
.nlh-crm-auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.nlh-crm-auth-tab.is-active {
    color: #1e3a5f;
    border-bottom-color: #1e3a5f;
}
.nlh-crm-auth-form {
    display: none;
    flex-direction: column;
    gap: 4px;
}
.nlh-crm-auth-form.is-active {
    display: flex;
}
.nlh-crm-auth-form label {
    font-size: 13px;
    color: #555;
    margin-top: 10px;
}
.nlh-crm-auth-form input {
    padding: 10px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 14px;
}
.nlh-crm-auth-form input:focus {
    outline: none;
    border-color: #1e3a5f;
}
.nlh-crm-auth-note {
    font-size: 12px;
    color: #888;
    margin-top: 10px;
}
.nlh-crm-auth-submit {
    margin-top: 18px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    padding: 11px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}
.nlh-crm-auth-submit:hover {
    background: #16304e;
    color: #fff;
}
.required {
    color: #d63638;
}

/* ==== Pending screen ==== */
.nlh-crm-pending-box {
    text-align: center;
    max-width: 420px;
}
.nlh-crm-pending-icon {
    font-size: 40px;
    margin-bottom: 8px;
}
.nlh-crm-pending-box h2 {
    margin: 8px 0;
    color: #1e3a5f;
}
.nlh-crm-logout-link {
    margin-top: 20px;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
}

/* ==== App Dashboard ==== */
.nlh-crm-app {
    background: #f4f5f7;
    min-height: 100vh;
    margin: -1px;
}
.nlh-crm-impersonate-bar {
    background: #fff3cd;
    color: #7a5b00;
    text-align: center;
    padding: 8px 14px;
    font-size: 13px;
}
.nlh-crm-impersonate-bar a {
    color: #7a5b00;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 10px;
}
.nlh-crm-topbar {
    background: #1e3a5f;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    flex-wrap: wrap;
}
.nlh-crm-topbar-brand {
    font-weight: 700;
    font-size: 17px;
}
.nlh-crm-topbar-nav {
    display: flex;
    gap: 16px;
    flex: 1;
    flex-wrap: wrap;
}
.nlh-crm-topbar-nav a {
    color: #cfd8e3;
    text-decoration: none;
    font-size: 14px;
    padding: 4px 2px;
    position: relative;
}
.nlh-crm-topbar-nav a.is-active,
.nlh-crm-topbar-nav a:hover {
    color: #fff;
    font-weight: 600;
}
.nlh-crm-topbar-badge {
    background: #e53935;
    color: #fff;
    font-size: 11px;
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
}
.nlh-crm-topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #cfd8e3;
}
.nlh-crm-topbar-user em {
    font-style: normal;
    opacity: 0.8;
}
.nlh-crm-logout-btn {
    background: rgba(255,255,255,0.12);
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
}
.nlh-crm-logout-btn:hover {
    background: rgba(255,255,255,0.22);
    color: #fff;
}

.nlh-crm-main {
    padding: 20px;
    max-width: 1100px;
    margin: 0 auto;
}
.nlh-crm-main-header h1 {
    font-size: 22px;
    margin: 0 0 16px;
    color: #1e3a5f;
}
.nlh-crm-main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.nlh-crm-app-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.nlh-crm-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.nlh-crm-filter-buttons .nlh-crm-app-btn {
    padding: 7px 14px;
    font-size: 13px;
}
.nlh-crm-filters-search {
    width: 100%;
}
.nlh-crm-filters-row {
    display: flex;
    gap: 10px;
}
.nlh-crm-filters-row select {
    flex: 1 1 0;
    min-width: 0;
}
.nlh-crm-app-filters input, .nlh-crm-app-filters select {
    padding: 6px 8px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
@media (max-width: 480px) {
    .nlh-crm-filters-row select {
        padding: 6px 4px;
        font-size: 12px;
    }
}
.nlh-crm-app-btn {
    background: #1e3a5f;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    display: inline-block;
}
.nlh-crm-app-btn:hover {
    background: #16304e;
    color: #fff;
}
.nlh-crm-app-btn-outline {
    background: #fff;
    color: #1e3a5f;
    border: 1px solid #cfd8e3;
}
.nlh-crm-app-btn-outline:hover {
    background: #f4f5f7;
    color: #1e3a5f;
}
.nlh-crm-detail-actions .nlh-crm-app-btn {
    padding: 10px 20px;
}
.nlh-crm-app-btn-delete {
    display: inline-block;
    color: #d63638;
    font-size: 13px;
    text-decoration: none;
    border: 1px solid #f0b4b4;
    padding: 6px 14px;
    border-radius: 6px;
}
.nlh-crm-app-btn-delete:hover {
    background: #fdecea;
}
.nlh-crm-detail-actions {
    display: flex;
    gap: 8px;
}

/* Fallback cho vài class gốc wp-admin còn dùng trong markup tái sử dụng (form nhắc việc/log) */
.nlh-crm-app .submit {
    margin-top: 10px;
}
.nlh-crm-app button[type="submit"]:not(.nlh-crm-app-btn) {
    background: #1e3a5f;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Detail page: 3 cột co giãn (thông tin / nhắc việc / nhật ký) */
.nlh-crm-app .nlh-crm-detail-grid {
    display: grid;
    grid-template-columns: 340px 1fr 1fr;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1100px) {
    .nlh-crm-app .nlh-crm-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Form Thêm/Sửa khách hàng (frontend) */
.nlh-crm-main-narrow {
    max-width: 640px;
}
.nlh-crm-frontend-form {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nlh-crm-form-field {
    margin-bottom: 16px;
}
.nlh-crm-form-field label {
    display: block;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
    font-weight: 600;
}
.nlh-crm-form-field input,
.nlh-crm-form-field select,
.nlh-crm-form-field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
}
.nlh-crm-form-field input:focus,
.nlh-crm-form-field select:focus,
.nlh-crm-form-field textarea:focus {
    outline: none;
    border-color: #1e3a5f;
}
.nlh-crm-form-hint {
    font-size: 12px;
    color: #888;
    margin: 4px 0 0;
}
.nlh-crm-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

/* Bảng Nhắc việc (frontend) */
.nlh-crm-reminders-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.nlh-crm-reminders-table th, .nlh-crm-reminders-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
    font-size: 14px;
}
.nlh-crm-reminders-table th {
    background: #f4f5f7;
    font-size: 13px;
    color: #555;
}
.nlh-crm-reminders-table tr.nlh-crm-reminder-overdue {
    background: #fdecea;
}
.nlh-crm-reminders-table .nlh-crm-delete-reminder {
    color: #d63638;
    text-decoration: none;
    font-size: 13px;
}

.nlh-crm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.nlh-crm-customer-card {
    background: #fff;
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    border-left: 3px solid transparent;
}
.nlh-crm-customer-card:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nlh-crm-customer-card.is-silent {
    border-left-color: #e53935;
}
.nlh-crm-customer-card-link {
    display: block;
    text-decoration: none;
    color: #333;
}
.nlh-crm-customer-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.nlh-crm-customer-card-top strong {
    font-size: 15px;
    color: #1e3a5f;
}
.nlh-crm-customer-card-status {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}
.nlh-crm-customer-card-phone {
    font-size: 13px;
    color: #444;
}
.nlh-crm-customer-card-project {
    font-size: 13px;
    color: #555;
    margin-bottom: 2px;
}
.nlh-crm-customer-card-silent {
    font-size: 12px;
    color: #d63638;
    margin-top: 6px;
    font-weight: 600;
}
.nlh-crm-customer-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f1;
}
.nlh-crm-badge {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.4;
}
.nlh-crm-empty {
    color: #888;
    font-style: italic;
    grid-column: 1 / -1;
}
.nlh-crm-app-pagination {
    margin-top: 20px;
    text-align: center;
}
.nlh-crm-app-pagination .page-numbers {
    display: inline-block;
    padding: 6px 11px;
    margin: 0 2px;
    background: #fff;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}
.nlh-crm-app-pagination .page-numbers.current {
    background: #1e3a5f;
    color: #fff;
}

/* Hàng gộp: chọn số dòng/trang + tổng số kết quả */
.nlh-crm-list-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0;
}
.nlh-crm-per-page-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
}
.nlh-crm-per-page-row select {
    padding: 6px 8px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 13px;
}

.nlh-crm-result-count {
    font-size: 13px;
    color: #666;
}
.nlh-crm-result-count strong {
    color: #1e3a5f;
}

/* Nhảy tới trang cụ thể */
.nlh-crm-jump-page-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: #555;
}
.nlh-crm-jump-page-form input[type="number"] {
    width: 70px;
    padding: 6px 8px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.nlh-crm-jump-current {
    font-weight: 600;
    color: #1e3a5f;
}

@media (max-width: 640px) {
    .nlh-crm-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .nlh-crm-topbar-user {
        width: 100%;
        justify-content: space-between;
    }
}