/* ============================================================================
   MLPA logged-in dashboard (job_manager/job-dashboard.php)
   Loaded only on the dashboard page via mlpa_report_found_ajax().

   Restyles WP Job Manager's dashboard into a modern card layout. The parent
   "petsitter" theme still provides Bootstrap (tabs + modal JS via data-toggle)
   and FontAwesome 4 — this file only changes appearance, never the JS hooks
   or the structural .nav-tabs / .tab-pane / .modal classes those depend on.
   ========================================================================== */

.mlpa-dashboard {
    --mlpa-orange: #e89145;
    --mlpa-orange-dark: #cf7a31;
    --mlpa-ink: #414042;
    --mlpa-muted: #777;
    --mlpa-line: #e6e7e8;
    --mlpa-bg: #f7f7f8;
    --mlpa-card: #fff;
    --mlpa-success: #4f9d3a;
    --mlpa-success-bg: #eaf5e6;
    --mlpa-warn: #b8860b;
    --mlpa-warn-bg: #fdf3da;
    --mlpa-danger: #c9483b;
    --mlpa-danger-bg: #fbe9e7;
    --mlpa-info: #2f6f9f;
    --mlpa-radius: 10px;
    --mlpa-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .04);

    color: var(--mlpa-ink);
    max-width: 1040px;
    margin: 0 auto;
}

.mlpa-dashboard * {
    box-sizing: border-box;
}

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.mlpa-dashboard__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.mlpa-dashboard__toolbar .btn i {
    margin-right: 6px;
}

/* ── Notices ───────────────────────────────────────────────────────────── */
.mlpa-dashboard .mlpa-notice {
    border-radius: var(--mlpa-radius);
    border: 1px solid var(--mlpa-line);
    padding: 14px 16px;
    margin: 0 0 18px;
}

/* ── Empty state ───────────────────────────────────────────────────────── */
.mlpa-empty {
    text-align: center;
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    padding: 56px 24px;
}

.mlpa-empty__icon {
    font-size: 52px;
    color: var(--mlpa-orange);
    margin-bottom: 14px;
    display: inline-block;
}

.mlpa-empty__title {
    margin: 0 0 8px;
    font-size: 24px;
}

.mlpa-empty__text {
    color: var(--mlpa-muted);
    margin: 0 auto 22px;
    max-width: 460px;
}

/* ── Pet card ──────────────────────────────────────────────────────────── */
.mlpa-pet-card {
    background: var(--mlpa-card);
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    box-shadow: var(--mlpa-shadow);
    margin-bottom: 24px;
    overflow: hidden;
}

.mlpa-pet-card[data-status="expired"] {
    opacity: .85;
}

.mlpa-pet-card__header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--mlpa-line);
}

.mlpa-pet-card__media img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--mlpa-line);
    display: block;
}

.mlpa-pet-card__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.mlpa-pet-card__title {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
}

.mlpa-pet-card__title a {
    color: var(--mlpa-ink);
    text-decoration: none;
}

.mlpa-pet-card__title a:hover {
    color: var(--mlpa-orange);
}

.mlpa-pet-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.mlpa-pet-card__aside {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* ── Status badge ──────────────────────────────────────────────────────── */
.mlpa-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.4;
}

.mlpa-status-badge--found {
    background: var(--mlpa-success-bg);
    color: var(--mlpa-success);
}

.mlpa-status-badge--active {
    background: var(--mlpa-warn-bg);
    color: var(--mlpa-warn);
}

/* ── Days-missing pill ─────────────────────────────────────────────────── */
.mlpa-days-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--mlpa-muted);
    background: var(--mlpa-bg);
    padding: 4px 10px;
    border-radius: 999px;
}

/* ── At-a-glance chips ─────────────────────────────────────────────────── */
.mlpa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.mlpa-chip {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--mlpa-bg);
    color: var(--mlpa-muted);
    border: 1px solid var(--mlpa-line);
}

.mlpa-chip--sent {
    background: var(--mlpa-success-bg);
    color: var(--mlpa-success);
    border-color: transparent;
}

.mlpa-chip--active {
    background: #e7f0f7;
    color: var(--mlpa-info);
    border-color: transparent;
}

.mlpa-chip--processing,
.mlpa-chip--pending {
    background: var(--mlpa-warn-bg);
    color: var(--mlpa-warn);
    border-color: transparent;
}

.mlpa-chip--failed {
    background: var(--mlpa-danger-bg);
    color: var(--mlpa-danger);
    border-color: transparent;
}

.mlpa-chip--done {
    background: var(--mlpa-success-bg);
    color: var(--mlpa-success);
    border-color: transparent;
}

/* ── Package badge ─────────────────────────────────────────────────────── */
.mlpa-package-badge {
    display: inline-block;
    background: var(--mlpa-ink);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    border-radius: 6px;
    padding: 4px 10px;
}

.mlpa-package-status {
    font-size: 12px;
    color: var(--mlpa-muted);
}

/* ── Actions row ───────────────────────────────────────────────────────── */
.mlpa-pet-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
}

.mlpa-found-cell {
    display: inline-flex;
}

.mlpa-pet-card__actions .btn i {
    margin-right: 5px;
}

/* ── Alert tabs ────────────────────────────────────────────────────────── */
.mlpa-pet-card__alerts {
    padding: 6px 20px 20px;
}

.mlpa-dashboard .nav-tabs {
    border-bottom: 2px solid var(--mlpa-line);
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding-left: 0;
    list-style: none;
}

.mlpa-dashboard .nav-tabs > li > a {
    border: none;
    border-radius: 0;
    color: var(--mlpa-muted);
    font-weight: 600;
    padding: 10px 14px;
    margin: 0;
    background: none;
}

.mlpa-dashboard .nav-tabs > li > a:hover {
    background: var(--mlpa-bg);
    color: var(--mlpa-ink);
    border: none;
}

.mlpa-dashboard .nav-tabs > li.active > a,
.mlpa-dashboard .nav-tabs > li.active > a:focus,
.mlpa-dashboard .nav-tabs > li.active > a:hover {
    color: var(--mlpa-orange);
    background: none;
    border: none;
    box-shadow: inset 0 -2px 0 var(--mlpa-orange);
}

.mlpa-dashboard .nav-tabs > li > a i {
    margin-right: 6px;
}

.mlpa-alert-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.mlpa-alert-heading {
    font-size: 17px;
    margin: 18px 0 8px;
}

.mlpa-muted {
    color: var(--mlpa-muted);
}

/* ── Recipient tables ──────────────────────────────────────────────────── */
.mlpa-recipient-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: 6px;
}

.mlpa-recipient-table th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mlpa-muted);
    border-bottom: 2px solid var(--mlpa-line);
    padding: 8px 10px;
}

.mlpa-recipient-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mlpa-line);
    vertical-align: top;
}

.mlpa-recipient-table tr:hover td {
    background: var(--mlpa-bg);
}

/* ── Facebook detail grid ──────────────────────────────────────────────── */
.mlpa-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 22px;
    background: var(--mlpa-bg);
    border-radius: var(--mlpa-radius);
    padding: 14px 16px;
}

.mlpa-detail-grid > div {
    display: flex;
    flex-direction: column;
}

.mlpa-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mlpa-muted);
}

.mlpa-detail-value {
    font-weight: 600;
}

.mlpa-fb-post,
.mlpa-fb-post .fb_iframe_widget,
.mlpa-fb-post .fb_iframe_widget span,
.mlpa-fb-post .fb_iframe_widget span iframe[style] {
    width: 100% !important;
    margin-top: 12px;
}

.mlpa-audio {
    max-width: 380px;
}

/* ── Upsell CTA ────────────────────────────────────────────────────────── */
.mlpa-cta {
    background: linear-gradient(135deg, var(--mlpa-orange), var(--mlpa-orange-dark));
    color: #fff;
    border-radius: var(--mlpa-radius);
    padding: 22px 24px;
    text-align: center;
    margin-top: 14px;
}

.mlpa-cta__text {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
}

.mlpa-cta .btn {
    background: #fff;
    color: var(--mlpa-orange-dark);
    font-weight: 700;
    border: none;
}

/* ── Mark-found modal ──────────────────────────────────────────────────── */
/* Center the dialog on-screen (Bootstrap 3 top-aligns it by default). */
.mlpa-modal.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.mlpa-modal .modal-dialog {
    margin: 0;
    width: 100%;
    max-width: 460px;
}

.mlpa-modal__intro {
    text-align: center;
    color: var(--mlpa-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.mlpa-mf-form select.form-control,
.mlpa-mf-form textarea.form-control {
    border: 1px solid var(--mlpa-line);
    border-radius: 8px;
    padding: 9px 10px;
}

.mlpa-mf-form select.form-control:focus,
.mlpa-mf-form textarea.form-control:focus {
    border-color: var(--mlpa-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(232, 145, 69, .15);
}

.mlpa-modal .modal-content {
    border-radius: var(--mlpa-radius);
    overflow: hidden;
    border: none;
}

.mlpa-modal .modal-header {
    border-bottom: none;
    padding: 0;
    position: relative;
}

.mlpa-modal__title {
    background: var(--mlpa-orange);
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 14px;
    margin: 0;
}

.mlpa-modal__close {
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 26px;
    line-height: 1;
    color: #fff;
    opacity: .9;
    text-shadow: none;
    z-index: 2;
}

.mlpa-modal .modal-body {
    padding: 20px;
}

.mlpa-mf-form .form-group {
    margin-bottom: 14px;
}

.mlpa-mf-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.mlpa-mf-form .form-control,
.mlpa-mf-form select.form-control {
    width: 100%;
    font-size: 14px;
}

.mlpa-mf-error {
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 10px;
}

.mlpa-mf-submit {
    width: 100%;
    font-size: 16px;
    box-shadow: none;
}

.required {
    color: var(--mlpa-danger);
}

/* CSS spinner — replaces the legacy admin loading.gif background. */
.mlpa-modal .spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 0, 0, .15);
    border-top-color: var(--mlpa-orange);
    border-radius: 50%;
    vertical-align: middle;
    margin: 0 auto 6px;
    animation: mlpa-spin .7s linear infinite;
}

.mlpa-modal .spinner.is-active {
    display: block;
}

@keyframes mlpa-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 668px) {
    .mlpa-pet-card__header {
        flex-wrap: wrap;
    }

    .mlpa-pet-card__aside {
        text-align: left;
        align-items: flex-start;
        width: 100%;
        flex-direction: row;
        gap: 8px;
        margin-top: 4px;
    }

    .mlpa-pet-card__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mlpa-found-cell {
        margin-left: 0;
    }

    .mlpa-pet-card__actions .btn {
        width: 100%;
        text-align: center;
    }

    .mlpa-dashboard .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mlpa-dashboard .nav-tabs > li {
        flex: 0 0 auto;
    }

    .mlpa-recipient-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ===========================================================================
   Service panels (replaces the old alert tabs). Each service renders on its
   own, so an order can include any subset of them.
   =========================================================================== */
.mlpa-dashboard {
    --mlpa-prep: #b8860b;   --mlpa-prep-bg: #fdf3da;
    --mlpa-live: #2f6f9f;   --mlpa-live-bg: #e7f0f7;
    --mlpa-done: #4f9d3a;   --mlpa-done-bg: #eaf5e6;
    --mlpa-fb: #1877f2;
}

.mlpa-pet-card__services-wrap {
    padding: 4px 16px 18px;
}

.mlpa-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mlpa-svc {
    border: 1px solid var(--mlpa-line);
    border-radius: var(--mlpa-radius);
    background: #fff;
    overflow: hidden;
}

.mlpa-svc__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.mlpa-svc__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--mlpa-bg);
    color: var(--mlpa-ink);
    font-size: 18px;
}

.mlpa-svc__icon--fb {
    background: var(--mlpa-fb);
    color: #fff;
}

.mlpa-svc__headtext {
    flex: 1 1 auto;
    min-width: 0;
}

.mlpa-svc__title {
    margin: 0;
    font-size: 16px;
    line-height: 1.2;
}

.mlpa-svc__summary {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--mlpa-muted);
}

/* Lifecycle status pill — never red, never "failed". */
.mlpa-svc__status {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.mlpa-svc__status--preparing { background: var(--mlpa-prep-bg); color: var(--mlpa-prep); }
.mlpa-svc__status--active    { background: var(--mlpa-live-bg); color: var(--mlpa-live); }
.mlpa-svc__status--complete  { background: var(--mlpa-done-bg); color: var(--mlpa-done); }

.mlpa-svc__body {
    padding: 0 14px 14px 66px;
}

@media (max-width: 668px) {
    .mlpa-svc__body { padding-left: 14px; }
}

.mlpa-svc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.mlpa-svc__note {
    font-size: 13px;
    color: var(--mlpa-prep);
    background: var(--mlpa-prep-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 10px 0 0;
}

.mlpa-svc__toolbar { margin: 0 0 8px; }

/* Buttons */
.mlpa-dashboard .mlpa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit; /* native <button> doesn't inherit the page font */
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--mlpa-orange);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter .15s ease;
}

.mlpa-dashboard .mlpa-btn:hover { filter: brightness(.95); color: #fff; }
.mlpa-dashboard .mlpa-btn--soft { background: var(--mlpa-bg); color: var(--mlpa-ink); border-color: var(--mlpa-line); }
.mlpa-dashboard .mlpa-btn--soft:hover { background: #eee; color: var(--mlpa-ink); }
.mlpa-dashboard .mlpa-btn--fb { background: var(--mlpa-fb); color: #fff; }
.mlpa-dashboard .mlpa-btn--sm { padding: 6px 10px; font-size: 12px; }
.mlpa-dashboard .mlpa-btn--found {
    background: var(--mlpa-done);
    color: #fff;
    font-size: 14px;
    padding: 11px 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.mlpa-dashboard .mlpa-btn--found:hover { background: #43862f; color: #fff; }

/* Disclosure ("View the N …") */
.mlpa-disclose {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: none;
    padding: 10px 0 2px;
    margin: 6px 0 0;
    color: var(--mlpa-live);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.mlpa-disclose__chev { transition: transform .15s ease; font-size: 11px; }
.mlpa-disclose[aria-expanded="true"] .mlpa-disclose__chev { transform: rotate(90deg); }
.mlpa-disclose__panel { margin-top: 8px; }

/* Recipient tables (fax businesses / phone households) */
.mlpa-rtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mlpa-rtable th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--mlpa-muted);
    background: transparent; /* override the parent theme's orange <th> fill */
    border-bottom: 2px solid var(--mlpa-line);
    padding: 7px 10px;
}

.mlpa-rtable td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--mlpa-line);
    vertical-align: top;
}

.mlpa-rtable__sub { display: block; color: var(--mlpa-muted); font-size: 11px; margin-top: 2px; }
.mlpa-rtable__num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mlpa-rtable__hint { font-size: 12px; color: var(--mlpa-muted); margin: 0 0 8px; }

/* Per-recipient delivery pill (fax) */
.mlpa-deliv {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--mlpa-bg);
    color: var(--mlpa-muted);
}

.mlpa-deliv--delivered { background: var(--mlpa-done-bg); color: var(--mlpa-done); }
.mlpa-deliv--sent      { background: var(--mlpa-live-bg); color: var(--mlpa-live); }
.mlpa-deliv--sending   { background: var(--mlpa-prep-bg); color: var(--mlpa-prep); }

/* Pagination */
.mlpa-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 2px 0;
    font-size: 13px;
    color: var(--mlpa-muted);
}

.mlpa-pager button {
    background: var(--mlpa-bg);
    border: 1px solid var(--mlpa-line);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--mlpa-ink);
}

.mlpa-pager button[disabled] { opacity: .4; cursor: default; }

/* Facebook facts grid */
.mlpa-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px 18px;
    margin: 4px 0 12px;
    background: var(--mlpa-bg);
    border-radius: var(--mlpa-radius);
    padding: 12px 14px;
}

.mlpa-facts__item { display: flex; flex-direction: column; }
.mlpa-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--mlpa-muted); }
.mlpa-facts dd { margin: 2px 0 0; font-weight: 600; font-size: 14px; }

/* Audio */
.mlpa-audio { margin-bottom: 6px; }
.mlpa-audio__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mlpa-audio audio { width: 100%; max-width: 360px; }

.mlpa-fb-post,
.mlpa-fb-post .fb_iframe_widget,
.mlpa-fb-post .fb_iframe_widget span,
.mlpa-fb-post .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

/* Upsell tile (service not purchased) */
.mlpa-svc--upsell {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-style: dashed;
    background: #fcfcfd;
}

.mlpa-svc--upsell .mlpa-svc__title { font-size: 15px; }
.mlpa-svc__add { margin-left: auto; flex: 0 0 auto; }

@media (max-width: 668px) {
    .mlpa-svc--upsell { flex-wrap: wrap; }
    .mlpa-svc__add { margin-left: 0; }
    .mlpa-facts { grid-template-columns: 1fr 1fr; }
}

/* SiteJabber review widget in the mark-found success message — make it fill
   the modal width (was an inline <style> in the AJAX response). */
.stjr-review-form-widget {
    width: auto !important;
}

/* ── Mark-found modal: 3-step layout ─────────────────────────────────────────
   Step 1 confirm → Step 2 optional details → Step 3 review. reportfound.js
   toggles which .mlpa-mf-step is visible. */
.mlpa-mf-step { animation: mlpa-mf-fade .2s ease; }
@keyframes mlpa-mf-fade { from { opacity: 0; } to { opacity: 1; } }
.mlpa-mf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.mlpa-mf-actions .mlpa-btn,
.mlpa-mf-actions .spinner { margin: 0; }