/* WPL Modern Agent Dashboard & Auth Styles */

/* =========================================
   HIDE PAGE TITLES & FULL SCREEN LAYOUT
   ========================================= */

/* Override WordPress block editor constrained layout for auth page */
body.wpl-has-auth-page .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body:has(.wpl-auth-wrapper) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

/* Body class added by JS for browsers without :has() support */
body.wpl-has-auth-page .entry-title,
body.wpl-has-auth-page .page-title,
body.wpl-has-auth-page .wp-block-post-title,
body.wpl-has-auth-page h1.has-text-align-center,
body.wpl-has-auth-page article > header,
body.wpl-has-auth-page .ast-archive-description,
body.wpl-has-auth-page .ast-article-single > header,
body.wpl-has-dashboard-page .entry-title,
body.wpl-has-dashboard-page .page-title,
body.wpl-has-dashboard-page .wp-block-post-title,
body.wpl-has-dashboard-page article > header,
body.wpl-has-dashboard-page .ast-archive-description,
body.wpl-has-dashboard-page .ast-article-single > header {
    display: none !important;
}

/* Target common theme page title classes using :has() */
body:has(.wpl-auth-wrapper) .entry-title,
body:has(.wpl-auth-wrapper) .page-title,
body:has(.wpl-auth-wrapper) .wp-block-post-title,
body:has(.wpl-auth-wrapper) h1.has-text-align-center,
body:has(.wpl-auth-wrapper) article > header,
body:has(.wpl-auth-wrapper) .ast-archive-description,
body:has(.wpl-auth-wrapper) .ast-article-single > header,
body:has(.wpl-dashboard-wrapper) .entry-title,
body:has(.wpl-dashboard-wrapper) .page-title,
body:has(.wpl-dashboard-wrapper) .wp-block-post-title,
body:has(.wpl-dashboard-wrapper) article > header,
body:has(.wpl-dashboard-wrapper) .ast-archive-description,
body:has(.wpl-dashboard-wrapper) .ast-article-single > header {
    display: none !important;
}

/* Astra theme specific - Hide page header area */
body.wpl-has-auth-page .ast-single-post-order,
body.wpl-has-auth-page .ast-single-post header.entry-header,
body:has(.wpl-auth-wrapper) .ast-single-post-order,
body:has(.wpl-auth-wrapper) .ast-single-post header.entry-header {
    display: none !important;
}

/* Remove parent container padding for full-screen login */
body.wpl-has-auth-page .entry-content,
body.wpl-has-auth-page .page-content,
body.wpl-has-auth-page .site-content,
body.wpl-has-auth-page .ast-container,
body.wpl-has-auth-page article,
body.wpl-has-auth-page main,
body.wpl-has-auth-page #primary,
body.wpl-has-auth-page #content,
body:has(.wpl-auth-wrapper) .entry-content,
body:has(.wpl-auth-wrapper) .page-content,
body:has(.wpl-auth-wrapper) .site-content,
body:has(.wpl-auth-wrapper) .ast-container,
body:has(.wpl-auth-wrapper) article,
body:has(.wpl-auth-wrapper) main,
body:has(.wpl-auth-wrapper) #primary,
body:has(.wpl-auth-wrapper) #content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Make the content area full width */
body.wpl-has-auth-page .site-main,
body.wpl-has-auth-page .ast-separate-container .ast-article-single,
body:has(.wpl-auth-wrapper) .site-main,
body:has(.wpl-auth-wrapper) .ast-separate-container .ast-article-single {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Astra specific full-width overrides */
body.wpl-has-auth-page .ast-plain-container .site-content .ast-container,
body:has(.wpl-auth-wrapper) .ast-plain-container .site-content .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

body.wpl-has-auth-page .ast-page-builder-template .site-content,
body:has(.wpl-auth-wrapper) .ast-page-builder-template .site-content {
    padding: 0 !important;
}

/* Block theme overrides - remove all padding and max-width constraints */
body.wpl-has-auth-page .wp-site-blocks,
body.wpl-has-auth-page .wp-block-group,
body.wpl-has-auth-page .wp-block-post-content,
body.wpl-has-auth-page .entry-content,
body:has(.wpl-auth-wrapper) .wp-site-blocks,
body:has(.wpl-auth-wrapper) .wp-block-group,
body:has(.wpl-auth-wrapper) .wp-block-post-content,
body:has(.wpl-auth-wrapper) .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
}

/* Reset any container constraints */
body.wpl-has-auth-page .has-global-padding,
body:has(.wpl-auth-wrapper) .has-global-padding {
    padding: 0 !important;
}

/* =========================================
   LOGIN / REGISTER PAGE STYLES
   ========================================= */

.wpl-login-already {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.wpl-login-already a {
    color: var(--wpl-primary, #b91c1c);
    font-weight: 600;
}

/* Auth Wrapper - Full Page Split Layout */
.wpl-auth-wrapper {
    display: flex;
    min-height: 100vh;
    width: 100vw;
    background: #f8f6f6;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Left Sidebar with Image */
.wpl-auth-sidebar {
    display: none;
    width: 50%;
    position: relative;
    background: #1a1a1a;
    background-size: cover;
    background-position: center;
}

@media (min-width: 1024px) {
    .wpl-auth-sidebar {
        display: block;
    }
}

.wpl-auth-sidebar-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px;
}

.wpl-auth-sidebar-content {
    max-width: 520px;
}

.wpl-auth-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.wpl-auth-sidebar-logo .wpl-auth-icon {
    width: 44px;
    height: 44px;
    background: var(--wpl-primary, #b91c1c);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.wpl-auth-sidebar-logo h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}

.wpl-auth-quote {
    font-size: 1.875rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 16px 0;
    padding: 0;
    border: none;
}

.wpl-auth-tagline {
    font-size: 1.125rem;
    color: #d1d5db;
    margin: 0;
}

/* Right Side - Main Form Area */
.wpl-auth-main {
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #f8f6f6;
    overflow-y: auto;
}

@media (min-width: 1024px) {
    .wpl-auth-main {
        width: 50%;
    }
}

/* Mobile Logo */
.wpl-auth-mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
}

@media (min-width: 1024px) {
    .wpl-auth-mobile-logo {
        display: none;
    }
}

.wpl-auth-mobile-logo .wpl-auth-icon {
    width: 32px;
    height: 32px;
    background: var(--wpl-primary, #b91c1c);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* Form Container */
.wpl-auth-form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px 60px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 640px) {
    
}

@media (min-width: 1280px) {
    
}

/* Alerts */
.wpl-auth-alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 0.875rem;
    font-weight: 500;
}

.wpl-auth-alert-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.wpl-auth-alert-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* Tab Buttons */
.wpl-auth-tabs {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.wpl-auth-tab {
    flex: 1;
    padding: 12px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wpl-auth-tab:hover {
    color: #374151;
}

.wpl-auth-tab.active {
    background: var(--wpl-primary, #b91c1c);
    color: #fff;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.3);
}

/* Auth Panels */
.wpl-auth-panel {
    display: none;
}

.wpl-auth-panel.active {
    display: block;
}

/* Header */
.wpl-auth-header {
    margin-bottom: 32px;
}

.wpl-auth-header h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

@media (min-width: 640px) {
    .wpl-auth-header h1 {
        font-size: 2.25rem;
    }
}

.wpl-auth-header p {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* Form */
.wpl-auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Form Fields */
.wpl-auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpl-auth-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.wpl-auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wpl-auth-input-icon {
    position: absolute;
    left: 16px;
    color: #9ca3af;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.wpl-auth-field input,
.wpl-auth-field select {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 48px;
    font-size: 0.9375rem;
    color: #111827;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    -webkit-appearance: none;
    appearance: none;
}

.wpl-auth-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

.wpl-auth-field input:focus,
.wpl-auth-field select:focus {
    outline: none;
    border-color: var(--wpl-primary, #b91c1c);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.wpl-auth-field input::placeholder {
    color: #9ca3af;
}

/* Password Toggle */
.wpl-auth-toggle-password {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    transition: color 0.2s ease;
}

.wpl-auth-toggle-password:hover {
    color: #6b7280;
}

/* Options Row */
.wpl-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -4px;
}

.wpl-auth-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.wpl-auth-checkbox input {
    width: 18px;
    height: 18px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    accent-color: var(--wpl-primary, #b91c1c);
}

.wpl-auth-checkbox span {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.wpl-auth-forgot {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wpl-primary, #b91c1c);
    text-decoration: none;
    transition: color 0.2s ease;
}

.wpl-auth-forgot:hover {
    color: #991b1b;
}

/* Submit Button */
.wpl-auth-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    background: var(--wpl-primary, #b91c1c);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
    margin-top: 8px;
}

.wpl-auth-submit:hover {
    background: #991b1b;
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.35);
    transform: translateY(-1px);
}

.wpl-auth-submit:active {
    transform: scale(0.98);
}

/*
 * The emailed-code path, alongside the password rather than instead of it.
 *
 * Quieter than the primary button on purpose: on a screen offering two ways in,
 * two equally loud buttons make the visitor choose before they have read either.
 * The password is the expected one, so it stays solid and this one recedes.
 */
.wpl-auth-submit-secondary {
    color: var(--wpl-primary, #b91c1c);
    background: transparent;
    border: 1.5px solid currentColor;
    box-shadow: none;
}

.wpl-auth-submit-secondary:hover {
    background: rgba(185, 28, 28, 0.06);
    box-shadow: none;
}

.wpl-auth-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 18px;
    color: #9ca3af;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wpl-auth-or::before,
.wpl-auth-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.wpl-auth-hint {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #6b7280;
    text-align: center;
}

/* Who is signed in, above the account tabs. */
.wpl-dashboard-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.wpl-dashboard-identity-who {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.wpl-dashboard-identity-who > div {
    min-width: 0;
}

.wpl-dashboard-identity-who strong {
    display: block;
    font-size: 0.95rem;
    line-height: 1.3;
}

.wpl-dashboard-identity-who span {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wpl-dashboard-avatar {
    border-radius: 50%;
    flex: none;
}

.wpl-dashboard-signout {
    flex: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    padding: 7px 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.wpl-dashboard-signout:hover {
    color: var(--wpl-primary, #b91c1c);
    border-color: currentColor;
}

/* Switch Link */
.wpl-auth-switch {
    margin-top: 28px;
    text-align: center;
}

.wpl-auth-switch p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.wpl-auth-switch-link {
    font-weight: 700;
    color: var(--wpl-primary, #b91c1c);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
}

.wpl-auth-switch-link:hover {
    color: #991b1b;
}

.wpl-auth-switch-link span {
    transition: transform 0.2s ease;
}

.wpl-auth-switch-link:hover span {
    transform: translateX(4px);
}

/* Security Badge */
.wpl-auth-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 48px;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 500;
}

/* =========================================
   DASHBOARD STYLES
   ========================================= */

/* Dashboard Container */
.wpl-dashboard-wrapper {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (min-width: 768px) {
    .wpl-dashboard-wrapper {
        padding: 60px 32px;
    }
}

/* Dashboard Title */
.wpl-dashboard-title {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 300;
    color: #111827;
    margin: 0 0 40px 0;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .wpl-dashboard-title {
        font-size: 3rem;
        margin-bottom: 48px;
    }
}

/* Dashboard Card */
.wpl-dashboard-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

/* Dashboard Tabs - New Modern Style */
.wpl-dashboard-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.wpl-dashboard-tab {
    padding: 12px 24px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wpl-dashboard-tab:hover {
    background: #fff;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.wpl-dashboard-tab.active {
    background: #fff;
    color: var(--wpl-primary, #b91c1c);
    font-weight: 600;
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Dashboard Content */
.wpl-dashboard-content {
    padding: 32px 24px;
}

@media (min-width: 768px) {
    .wpl-dashboard-content {
        padding: 40px;
    }
}

/* Section Header */
.wpl-section-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .wpl-section-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.wpl-section-header h2 {
    font-size: 1.5rem;
    font-weight: 400;
    color: #111827;
    margin: 0;
}

.wpl-section-header p {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 4px 0 0 0;
}

/* Action Buttons */
.wpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    border: none;
}

.wpl-btn-primary {
    background: var(--wpl-primary, #b91c1c);
    color: #fff;
    box-shadow: 0 1px 3px rgba(185, 28, 28, 0.2);
}

.wpl-btn-primary:hover {
    background: #991b1b;
    color: #fff;
}

.wpl-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}

.wpl-btn-secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

/* Search Box */
.wpl-search-box {
    position: relative;
    width: 100%;
    max-width: 280px;
}

.wpl-search-box input {
    width: 100%;
    height: 40px;
    padding: 0 16px 0 44px;
    font-size: 0.875rem;
    color: #111827;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.wpl-search-box input:focus {
    outline: none;
    background: #fff;
    border-color: var(--wpl-primary, #b91c1c);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.wpl-search-box svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

/* Modern Table */
.wpl-modern-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

.wpl-modern-table thead {
    background: #f9fafb;
}

.wpl-modern-table th {
    padding: 16px 20px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

.wpl-modern-table td {
    padding: 16px 20px;
    font-size: 0.875rem;
    color: #111827;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.wpl-modern-table tbody tr:last-child td {
    border-bottom: none;
}

.wpl-modern-table tbody tr {
    transition: background 0.15s ease;
}

.wpl-modern-table tbody tr:hover {
    background: #f9fafb;
}

/* Table Cell with Image */
.wpl-table-property {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wpl-table-property-image {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}

.wpl-table-property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wpl-table-property-title {
    font-weight: 500;
    color: #111827;
}

/* Status Badges - with specific overrides to prevent conflicts */
.wpl-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
}

.wpl-dashboard-wrapper .wpl-status-approved,
.wpl-status-approved {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.wpl-status-pending {
    background: #fef9c3;
    color: #854d0e;
}

.wpl-status-draft {
    background: #f3f4f6;
    color: #4b5563;
}

.wpl-status-new {
    background: #dbeafe;
    color: #1e40af;
}

.wpl-status-contacted {
    background: #fef3c7;
    color: #92400e;
}

.wpl-status-converted {
    background: #dcfce7;
    color: #166534;
}

/* Table Actions */
.wpl-table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.wpl-table-actions a {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s ease;
}

.wpl-action-edit {
    color: #4f46e5;
}

.wpl-action-edit:hover {
    background: #eef2ff;
    color: #4338ca;
}

.wpl-action-delete {
    color: var(--wpl-primary, #b91c1c);
}

.wpl-action-delete:hover {
    background: #fef2f2;
    color: #991b1b;
}

.wpl-action-icon {
    color: #9ca3af;
    padding: 6px;
    border-radius: 6px;
}

.wpl-action-icon:hover {
    color: var(--wpl-primary, #b91c1c);
    background: #fef2f2;
}

/* Lead Avatar */
.wpl-lead-avatar {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.wpl-lead-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wpl-lead-name span {
    font-weight: 500;
}

/* Contact Info */
.wpl-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wpl-contact-email {
    color: #111827;
}

.wpl-contact-phone {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Property Interest */
.wpl-property-interest {
    display: flex;
    flex-direction: column;
}

.wpl-property-interest-title {
    font-weight: 500;
    color: #111827;
}

.wpl-property-interest-location {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Pagination */
.wpl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
    margin-top: 24px;
    background: #f9fafb;
    border-radius: 0 0 12px 12px;
}

.wpl-pagination-info {
    font-size: 0.875rem;
    color: #6b7280;
}

.wpl-pagination-info strong {
    color: #111827;
    font-weight: 600;
}

.wpl-pagination-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wpl-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    text-decoration: none;
    transition: all 0.15s ease;
}

.wpl-pagination-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.wpl-pagination-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.wpl-pagination-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

.wpl-pagination-btn.active {
    background: var(--wpl-primary, #b91c1c);
    border-color: var(--wpl-primary, #b91c1c);
    color: #fff;
}

/* =========================================
   FORM STYLES (Add Property / Profile)
   ========================================= */

/* Step Indicator - Modern */
.wpl-step-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 24px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
}

.wpl-step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.wpl-step-item:hover {
    color: #374151;
    background: #f3f4f6;
}

.wpl-step-item.active {
    color: var(--wpl-primary, #b91c1c);
    font-weight: 600;
    border-bottom: 2px solid var(--wpl-primary, #b91c1c);
    border-radius: 8px 8px 0 0;
}

.wpl-step-item.completed {
    color: #059669;
}

/* Section Header with Accent */
.wpl-form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.wpl-form-section-accent {
    width: 4px;
    height: 24px;
    background: var(--wpl-primary, #b91c1c);
    border-radius: 2px;
}

.wpl-form-section-header h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #111827;
    margin: 0;
}

/* Modern Form Grid */
.wpl-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

@media (min-width: 768px) {
    .wpl-form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 32px;
    }
}

.wpl-form-grid-full {
    grid-column: 1 / -1;
}

/* Form Field - Modern */
.wpl-modern-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wpl-modern-field label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

/* Text-style fields only. Checkboxes/radios must be excluded — otherwise the
   padding, border and (especially) the :focus background below get painted over
   the native control and hide its checkmark until it loses focus. */
.wpl-modern-field input:not([type="checkbox"]):not([type="radio"]),
.wpl-modern-field select,
.wpl-modern-field textarea {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem;
    color: #111827;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.wpl-modern-field input:not([type="checkbox"]):not([type="radio"]):focus,
.wpl-modern-field select:focus,
.wpl-modern-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--wpl-primary, #b91c1c);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.wpl-modern-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* Price Input with Symbol */
.wpl-price-input {
    position: relative;
}

.wpl-price-symbol {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: #6b7280;
}

.wpl-price-input input {
    padding-left: 32px;
}

/* Checkbox Modern */
.wpl-modern-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.wpl-modern-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--wpl-primary, #b91c1c);
}

.wpl-modern-checkbox span {
    font-size: 0.9375rem;
    color: #111827;
}

/* Give the native checkbox a clear, focus-independent look so the tick never
   depends on the focus state (which is what used to hide it in wp-admin). */
.wpl-modern-checkbox input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    accent-color: var(--wpl-primary, #b91c1c);
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    flex-shrink: 0;
}

/* Unmistakable selected state — pure CSS, no JS: emphasise the label of a ticked box. */
.wpl-modern-checkbox input[type="checkbox"]:checked + span {
    color: var(--wpl-primary, #b91c1c);
    font-weight: 600;
}

/* Form Actions */
.wpl-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 32px;
    margin-top: 32px;
    border-top: 1px solid #e5e7eb;
}

/* Profile Section Divider */
.wpl-profile-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 40px 0;
}

/* Password Section */
.wpl-password-section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #e5e7eb;
}

.wpl-password-note {
    font-size: 1rem;
    color: #111827;
    font-weight: 300;
    margin-top: 16px;
}

/* Empty State */
.wpl-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.wpl-empty-state svg {
    width: 64px;
    height: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}

.wpl-empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* Responsive Table Wrapper */
.wpl-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Export Button Alignment */
.wpl-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Alerts in Dashboard */
.wpl-dashboard-alert {
    padding: 16px 20px;
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 0.9375rem;
    font-weight: 500;
}

.wpl-dashboard-alert-success {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.wpl-dashboard-alert-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

/* Admin Remark Display in Dashboard */
.wpl-admin-remark-display {
    background: #fef3c7;
    color: #92400e;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.875rem;
    border-left: 3px solid #f59e0b;
    max-width: 300px;
}

.wpl-admin-remark-display .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

.wpl-no-remark {
    color: #9ca3af;
}

/* Status Badges in Dashboard */
.wpl-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.wpl-status-pending {
    background: #fef3c7;
    color: #92400e;
}

.wpl-status-approved {
    background: #d1fae5;
    color: #065f46;
}

.wpl-status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* =========================================
   PROPERTY TYPE SUMMARY CARD
   ========================================= */
.wpl-type-summary-card {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
}

.wpl-type-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wpl-type-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    font-weight: 500;
}

.wpl-type-value {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a2e;
}

/* Form container visibility */
#wpl-property-form-container {
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   LISTING TYPE CONDITIONAL FIELDS
   ========================================= */

/* Property Type Selector */
.wpl-property-type-selector select {
    font-size: 15px;
    padding: 12px 16px;
}

.wpl-field-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 6px;
    font-style: italic;
}

/* Form Subsections for Range Inputs */
.wpl-form-subsection {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.wpl-subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 6px 0;
}

.wpl-subsection-title .dashicons {
    color: #667eea;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.wpl-subsection-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

/* Range Inputs Layout */
.wpl-range-inputs {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.wpl-range-inputs .wpl-modern-field {
    flex: 1;
    min-width: 200px;
}

.wpl-range-separator {
    padding: 10px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 1px;
    border-radius: 8px;
    margin-bottom: 0;
    align-self: flex-end;
    height: fit-content;
}

/* Configuration Checkboxes */
.wpl-config-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}

.wpl-config-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    color: #374151;
}

.wpl-config-checkbox:hover {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.04);
}

.wpl-config-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
    cursor: pointer;
}

.wpl-config-checkbox input[type="checkbox"]:checked + span {
    color: #667eea;
}

.wpl-config-checkbox:has(input:checked) {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.08);
}

/* Single Unit vs New Project Fields Toggle */
.wpl-single-unit-fields,
.wpl-new-project-fields {
    width: 100%;
}

/* Responsive adjustments for range inputs */
@media (max-width: 768px) {
    .wpl-range-inputs {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wpl-range-inputs .wpl-modern-field {
        min-width: 100%;
    }
    
    .wpl-range-separator {
        align-self: center;
        padding: 8px 24px;
    }
    
    .wpl-config-checkboxes {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .wpl-config-checkboxes {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   LOCATION INTELLIGENCE SECTION
   ========================================= */

/* Map Input Row */
.wpl-map-input-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.wpl-map-input-row input {
    flex: 1;
    min-width: 120px;
}

.wpl-get-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.wpl-get-location-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* Property Map Container */
.wpl-property-map {
    border: 2px solid #e2e8f0;
    background: #f8fafc;
}

.wpl-map-section {
    margin-top: 8px;
}

/* Locality autocomplete dropdown styles */
.wpl-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
}

.wpl-autocomplete-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s;
}

.wpl-autocomplete-item:hover {
    background: rgba(102, 126, 234, 0.08);
}

.wpl-autocomplete-item:last-child {
    border-bottom: none;
}

@media (max-width: 768px) {
    .wpl-map-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wpl-map-input-row input {
        width: 100%;
    }
    
    .wpl-get-location-btn {
        justify-content: center;
    }
}

/* =========================================
   ACCOUNT PANELS — cards, chips, actions
   =========================================
   These panels used to be a bulleted list with the facts run together as text.
   A person with four enquiries could not tell at a glance which had been
   answered, and could not act on any of them without starting again from the
   property page. Status is carried by colour as well as by the word, so the row
   that needs attention is findable without reading every one. */

/* The buyer's own record, as tables.

   Cards came before these and were the wrong shape: a card is for one thing you
   look at, and this is everything somebody has done on the site. Four cards
   across show four facts each and waste two-thirds of the width; a table shows
   every enquiry with everything known about it, aligned so the columns read
   down and two properties can be compared without opening either.

   The wrapper scrolls sideways rather than letting the table squeeze — a row
   that stays one row is what makes it comparable — and below 720px each row
   becomes its own labelled block, because six columns on a phone is not a
   table, it is a puzzle. */

.wpl-acc-tablewrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
}

.wpl-acc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.wpl-acc-table th,
.wpl-acc-table td {
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #f0f1f3;
}

.wpl-acc-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f9fafb;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6b7280;
    white-space: nowrap;
}

.wpl-acc-table tbody tr:last-child td { border-bottom: 0; }
.wpl-acc-table tbody tr:hover { background: #fcfcfd; }

/* An upcoming, confirmed visit is the one row somebody is looking for. */
.wpl-acc-table tbody tr.is-upcoming { background: #fffdf8; }
.wpl-acc-table tbody tr.is-upcoming:hover { background: #fffaf0; }

.wpl-acc-strong { font-weight: 600; color: #111827; text-decoration: none; }
a.wpl-acc-strong:hover { text-decoration: underline; }

.wpl-acc-sub {
    display: block;
    margin-top: 2px;
    font-size: 0.76rem;
    color: #6b7280;
}

.wpl-acc-muted { color: #9ca3af; }

/* Free text is the one column that must not stretch the table. */
.wpl-acc-msg {
    min-width: 200px;
    max-width: 340px;
    color: #4b5563;
    line-height: 1.5;
}

.wpl-acc-actions-col { white-space: nowrap; }
.wpl-acc-actions-col .wpl-acc-btn + .wpl-acc-btn { margin-left: 6px; }

/* Status chips. Four tones, chosen for meaning: green finished, amber needs
   somebody, grey closed, blue in progress. */
.wpl-acc-chip {
    flex: none;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wpl-acc-chip.is-ok     { background: #e9f6ef; color: #067647; }
.wpl-acc-chip.is-warn   { background: #fdf3e9; color: #b54708; }
.wpl-acc-chip.is-muted  { background: #f3f4f6; color: #6b7280; }
.wpl-acc-chip.is-info   { background: #eef2ff; color: #4338ca; }

.wpl-acc-stars {
    flex: none;
    color: #f59e0b;
    font-size: 0.95rem;
    letter-spacing: .06em;
}

.wpl-acc-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--wpl-primary, #b91c1c);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.wpl-acc-btn:hover { filter: brightness(1.06); color: #fff; }

.wpl-acc-btn.is-quiet {
    background: transparent;
    color: #374151;
    border-color: #d1d5db;
}
.wpl-acc-btn.is-quiet:hover {
    color: var(--wpl-primary, #b91c1c);
    border-color: currentColor;
    filter: none;
}

/* Empty states say what would put something here, rather than only that
   nothing is. */
.wpl-acc-empty {
    padding: 40px 24px;
    text-align: center;
    border: 1px dashed #e5e7eb;
    border-radius: 12px;
    background: #fafafa;
}
.wpl-acc-empty h3 { margin: 0 0 6px; font-size: 1rem; }
.wpl-acc-empty p  { margin: 0 0 16px; color: #6b7280; font-size: 0.9rem; }

/* Below 720px the table stops being a table.

   Six columns on a phone is not readable at any font size, and a sideways
   scroll that hides the property name — the one column that says which row this
   is — is worse than no table. Each row becomes a labelled block, with the
   header text repeated from the cell's own data-label so the two cannot drift
   apart the way a hand-maintained mobile copy would. */
@media (max-width: 720px) {
    .wpl-acc-tablewrap { overflow-x: visible; border: 0; background: none; }

    .wpl-acc-table,
    .wpl-acc-table tbody,
    .wpl-acc-table tr,
    .wpl-acc-table td { display: block; width: 100%; box-sizing: border-box; }

    .wpl-acc-table thead { display: none; }

    .wpl-acc-table tbody tr {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #fff;
        padding: 6px 2px;
        margin-bottom: 12px;
    }

    .wpl-acc-table td {
        display: flex;
        gap: 12px;
        justify-content: space-between;
        align-items: baseline;
        padding: 7px 14px;
        border-bottom: 0;
    }

    .wpl-acc-table td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #6b7280;
    }

    /* The actions cell carries no label and should span the row. */
    .wpl-acc-table td.wpl-acc-actions-col {
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
        padding-top: 10px;
    }
    .wpl-acc-table td.wpl-acc-actions-col::before { content: none; }
    .wpl-acc-actions-col .wpl-acc-btn + .wpl-acc-btn { margin-left: 0; }

    .wpl-acc-msg { max-width: none; text-align: right; }
}