/* ============================================================
   BUSINESS "MANAGE" PREMIUM THEME
   ------------------------------------------------------------
   Scoped styles for the owner-only Preview / Edit / Skills
   experience on business.html (only active when ?manage=true).
   Does NOT touch the public-facing business page styles.
   ============================================================ */

/* Polices : Inter, chargee par la page (plus de Fraunces : le site est
   entierement en Inter). Couleurs : les variables --pm-* pointent sur les
   tokens Nocturne (nocturne-base.css), elles suivent donc le theme clair
   ou sombre au lieu de la palette laiton / ivoire d origine. */

.pm-scope {
    --pm-ink: var(--color-text);
    --pm-ink-soft: var(--color-accent-300);
    --pm-brass: var(--color-accent);
    --pm-brass-light: var(--color-accent-700);
    --pm-brass-dim: var(--color-accent-300);
    --pm-ivory: var(--color-bg);
    --pm-ivory-dim: var(--color-section);
    --pm-slate: var(--color-text);
    --pm-slate-muted: var(--color-neutral-500);
    --pm-hairline: var(--color-divider);
    --pm-emerald: #2f6b4f;
    --pm-amber: #b9822f;
    --pm-danger: #a4453b;
    font-family: var(--font-body);
    color: var(--pm-slate);
    background: var(--pm-ivory);
    padding: 24px 0 40px;
    border-radius: 16px;
}

.pm-scope * { box-sizing: border-box; }

/* ===== PROFILE COMPLETION CHIP ===== */
.pm-completion-row { display: flex; justify-content: flex-end; max-width: 900px; margin: 0 auto 14px; padding: 0 12px; }
.pm-completion-chip {
    display: flex; align-items: center; gap: 11px; background: var(--color-surface); border: 1px solid var(--pm-hairline);
    border-radius: 99px; padding: 7px 16px 7px 7px; box-shadow: 0 10px 22px -20px rgba(20,24,31,.42);
}
.pm-completion-ring {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    background: conic-gradient(var(--pm-brass) var(--pm-deg, 0deg), var(--pm-hairline) 0deg);
    display: flex; align-items: center; justify-content: center;
}
.pm-completion-ring::before { content: ''; width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface); }
.pm-completion-chip .pm-c-txt { font-size: .78rem; color: var(--pm-slate); font-weight: 600; }
.pm-completion-chip .pm-c-txt b { color: var(--pm-brass-dim); font-weight: 700; }

/* ===== TAB SWITCHER ===== */
.pm-tab-switcher {
    display: flex; gap: 6px; background: var(--pm-ivory-dim);
    border: 1px solid var(--pm-hairline); border-radius: 12px; padding: 6px;
    margin: 0 0 24px; max-width: 900px; margin-left: auto; margin-right: auto;
    box-shadow: 0 10px 22px -20px rgba(20,24,31,.42);
}

.pm-tab-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 13px 18px; border-radius: 8px; border: none; background: transparent;
    cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--pm-slate-muted);
    transition: all .2s; font-family: var(--font-body); position: relative;
}
.pm-tab-btn:hover { color: var(--pm-ink); }
.pm-tab-btn.active { background: var(--pm-ink); color: var(--pm-brass-light); box-shadow: 0 8px 18px -8px rgba(20,24,31,.4); }

.pm-body { max-width: 900px; margin: 0 auto; padding: 0 12px; }

.pm-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pm-toolbar .pm-sub { font-size: .78rem; color: var(--pm-slate-muted); }
.pm-expand-toggle {
    display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
    color: var(--pm-brass-dim); background: none; border: none; cursor: pointer; padding: 6px 4px;
}
.pm-expand-toggle:hover { color: var(--pm-ink); }

/* ===== ACCORDION CARD ===== */
.pm-card {
    background: var(--color-surface); border: 1px solid var(--pm-hairline); border-radius: 13px;
    margin-bottom: 14px; overflow: hidden; transition: border-color .2s;
    box-shadow: 0 10px 24px -22px rgba(20,24,31,.42);
}
.pm-card.pm-open { border-color: color-mix(in srgb, var(--color-accent) 48%, transparent); box-shadow: 0 18px 34px -26px rgba(20,24,31,.46); }
.pm-card-head {
    width: 100%; padding: 19px 24px; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; text-align: left;
    font-family: var(--font-body);
}
.pm-card-head:hover { background: var(--pm-ivory-dim); }
.pm-card-head .pm-title {
    display: flex; align-items: center; gap: 13px; font-family: var(--font-heading);
    font-size: 1.04rem; font-weight: 600; color: var(--pm-ink);
}
.pm-card-head .pm-ic-wrap {
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(145deg, var(--color-accent-900), var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-accent) 16%, transparent);
    display: flex; align-items: center; justify-content: center; color: var(--pm-brass-dim);
    flex-shrink: 0; font-size: 1.05rem;
}
.pm-card-head .pm-head-right { display: flex; align-items: center; gap: 14px; }
.pm-card-head .pm-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pm-hairline); flex-shrink: 0; }
.pm-card-head .pm-status-dot.pm-filled { background: var(--pm-emerald); }
.pm-chevron { color: var(--pm-slate-muted); transition: transform .25s ease; display: inline-block; }
.pm-card.pm-open .pm-chevron { transform: rotate(180deg); }

.pm-card-body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.pm-card.pm-open .pm-card-body-wrap { grid-template-rows: 1fr; }
.pm-card-body-inner { overflow: hidden; min-height: 0; }
.pm-card-body { padding: 4px 24px 24px; border-top: 1px solid var(--pm-ivory-dim); padding-top: 20px; }

/* Brief highlight when a card is opened via a deep link (e.g. an "Add now"
   link from my-business.html's profile-strength checklist), so it's obvious
   which section the page just jumped to. */
.pm-card.pm-highlight {
    border-color: var(--pm-brass);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 28%, transparent), 0 18px 34px -26px rgba(20,24,31,.46);
    transition: border-color .2s, box-shadow .35s ease;
}

.pm-card-body .form-group { margin-bottom: 18px; }
.pm-card-body .form-group:last-child { margin-bottom: 0; }
.pm-card-body label { font-size: .72rem; font-weight: 700; color: var(--pm-slate); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: 8px; }

.pm-card-body input[type="text"],
.pm-card-body input[type="url"],
.pm-card-body input[type="tel"],
.pm-card-body input[type="number"],
.pm-card-body input[type="file"],
.pm-card-body select,
.pm-card-body textarea,
.pm-card-body .edit-field,
.pm-card-body .edit-select {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--pm-hairline) !important; border-radius: 7px !important;
    font-size: .9rem; font-family: var(--font-body); color: var(--pm-ink); background: var(--color-surface) !important; outline: none;
    transition: border .2s, box-shadow .2s;
}
.pm-card-body input:focus, .pm-card-body select:focus, .pm-card-body textarea:focus {
    border-color: var(--pm-brass) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.pm-card-body input:read-only { background: var(--pm-ivory-dim) !important; color: var(--pm-slate-muted); cursor: not-allowed; }
.pm-card-body small { font-size: .75rem; color: var(--pm-slate-muted); display: block; margin-top: 8px; }

.pm-readonly-chip {
    display: flex; align-items: center; justify-content: space-between; padding: 13px 15px;
    background: var(--pm-ivory-dim); border: 1.5px solid var(--pm-hairline); border-radius: 7px;
}
.pm-readonly-chip span { font-size: .9rem; color: var(--pm-ink); font-weight: 600; }
.pm-readonly-chip .pm-lock { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--pm-slate-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }

.pm-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
@media (max-width: 640px) { .pm-stat-grid { grid-template-columns: 1fr 1fr; } }
.pm-stat-box { text-align: center; padding: 17px 10px; background: var(--pm-ivory-dim); border-radius: 9px; }
.pm-stat-box .pm-n { font-family: var(--font-heading); font-size: 1.55rem; font-weight: 600; color: var(--pm-ink); }
.pm-stat-box .pm-l { font-size: .66rem; color: var(--pm-slate-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 4px; }

.pm-badge-toggle-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pm-badge-toggle {
    display: flex; align-items: center; gap: 12px; padding: 13px 16px;
    border: 1.5px solid var(--pm-hairline); border-radius: 9px; flex: 1; min-width: 220px;
    cursor: pointer; transition: all .2s;
}
.pm-badge-toggle:hover { border-color: var(--pm-brass-dim); }
.pm-badge-toggle.pm-on { border-color: var(--pm-emerald); background: rgba(47,107,79,.05); }
.pm-badge-toggle .pm-b-icon {
    width: 32px; height: 32px; border-radius: 8px; background: var(--pm-ivory-dim);
    display: flex; align-items: center; justify-content: center; color: var(--pm-slate-muted); flex-shrink: 0;
}
.pm-badge-toggle.pm-on .pm-b-icon { background: rgba(47,107,79,.12); color: var(--pm-emerald); }
.pm-badge-toggle .pm-b-text strong { display: block; font-size: .84rem; color: var(--pm-ink); font-weight: 600; }
.pm-badge-toggle .pm-b-text span { font-size: .71rem; color: var(--pm-slate-muted); }
.pm-mini-toggle {
    width: 34px; height: 19px; border-radius: 99px; background: var(--pm-hairline);
    position: relative; margin-left: auto; flex-shrink: 0; transition: background .2s;
}
.pm-mini-toggle::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
    border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s;
}
.pm-badge-toggle.pm-on .pm-mini-toggle { background: var(--pm-emerald); }
.pm-badge-toggle.pm-on .pm-mini-toggle::after { transform: translateX(15px); }

/* Payment tags reuse existing .payment-tag markup, restyle to pill */
.pm-card-body .payment-tag {
    display: inline-flex; align-items: center; gap: 9px; background: var(--pm-ivory-dim);
    border: 1px solid var(--pm-hairline); padding: 8px 8px 8px 14px; border-radius: 99px;
    font-size: .81rem; color: var(--pm-ink); font-weight: 500;
}
.pm-card-body .payment-tag button, .pm-card-body .payment-tag .remove-tag {
    border: none; background: rgba(164,69,59,.1); color: var(--pm-danger); width: 18px; height: 18px;
    border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    margin-left: 4px; font-size: .7rem; line-height: 1;
}

.pm-add-row { display: flex; gap: 10px; margin-top: 6px; }
.pm-add-row input { flex: 1; }
.pm-btn-add {
    display: flex; align-items: center; gap: 7px; padding: 0 18px; border: 1px solid var(--pm-brass);
    background: transparent; color: var(--pm-brass-dim); border-radius: 7px; font-weight: 600;
    font-size: .82rem; cursor: pointer; transition: all .2s; white-space: nowrap; font-family: var(--font-body);
}
.pm-btn-add:hover { background: var(--pm-brass); color: var(--color-bg); }

/* Hours */
.pm-card-body .hours-row, .pm-card-body [id^="hours_"] {
    display: grid; grid-template-columns: 100px 1fr 1fr; gap: 12px; align-items: center;
    padding: 9px 0; border-bottom: 1px solid var(--pm-ivory-dim);
}

/* Media */
.pm-logo-preview-row { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.pm-logo-preview-row .pm-meta strong { display: block; font-size: .88rem; color: var(--pm-ink); font-family: var(--font-heading); font-weight: 600; }
.pm-logo-preview-row .pm-meta span { font-size: .74rem; color: var(--pm-slate-muted); }
.pm-divider { border: none; border-top: 1px solid var(--pm-hairline); margin: 20px 0; }

/* Cover banner - click-to-change, same interaction as the avatar photo
   (click the image, or its camera badge, to open the file picker). Wide
   card so it previews close to how it'll actually look on the public
   hero and on search-result cards. */
.pm-banner-wrap {
    position: relative; width: 100%; height: 120px; border-radius: 12px;
    overflow: hidden; cursor: pointer; margin-bottom: 6px;
    background: linear-gradient(120deg, var(--pm-ink-soft), var(--pm-brass-dim) 55%, var(--pm-brass-light));
    background-size: cover; background-position: center;
    border: 1px solid var(--pm-hairline);
}
.pm-banner-wrap .pm-banner-empty {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.85); font-size: .82rem; font-weight: 600;
    background: rgba(20,24,31,.18);
}
.pm-banner-camera {
    position: absolute; bottom: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--color-accent); color: var(--color-bg); border: 2px solid var(--color-surface); display: flex; align-items: center;
    justify-content: center; font-size: .85rem; box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Add-form (photos/video/services/skills) reused, restyled */
.pm-card-body .add-form {
    background: var(--pm-ivory-dim) !important; border: 1.5px dashed var(--pm-hairline) !important;
    border-radius: 9px !important; padding: 18px !important; margin-top: 14px !important;
}
.pm-card-body .add-form h4 {
    font-family: var(--font-heading); font-size: .92rem; color: var(--pm-ink); margin: 0 0 12px; font-weight: 600;
}
.pm-card-body .manage-link {
    display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 7px;
    border: 1.5px solid var(--pm-brass); background: transparent; color: var(--pm-brass-dim);
    font-weight: 600; font-size: .82rem; cursor: pointer; transition: all .2s; margin-top: 8px;
    text-decoration: none;
}
.pm-card-body .manage-link:hover { background: var(--pm-brass); color: var(--color-bg); }

/* ===== SAVE BAR ===== */
.pm-save-bar {
    position: sticky; bottom: 0; background: color-mix(in srgb, var(--color-bg) 94%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--pm-hairline); padding: 16px 0; display: flex; gap: 12px;
    justify-content: flex-end; margin-top: 8px;
}
.pm-btn { display: flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 7px; font-weight: 600; font-size: .87rem; cursor: pointer; border: none; transition: all .2s; font-family: var(--font-body); }
.pm-btn-primary { background: var(--pm-ink); color: var(--pm-brass-light); }
.pm-btn-primary:hover { background: var(--pm-ink-soft); transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(20,24,31,.4); }
.pm-btn-secondary { background: transparent; border: 1.5px solid var(--pm-hairline); color: var(--pm-slate); }
.pm-btn-secondary:hover { border-color: var(--pm-brass-dim); }

/* ===== PER-SECTION SAVE (inside each accordion card) =====
   Lets a pro save right where they're editing instead of having to
   scroll all the way down to the bottom save bar. Calls the same
   saveBusinessProfile() as the bottom bar (it always submits the
   full current form state), so saving from any one card saves
   everything - there's nothing partial or surprising about it. */
.pm-card-save-row {
    display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--pm-ivory-dim);
}
.pm-card-save-btn {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px;
    background: var(--pm-ink); color: var(--pm-brass-light); font-weight: 600; font-size: .82rem;
    border: none; cursor: pointer; transition: all .2s; font-family: var(--font-body);
}
.pm-card-save-btn:hover { background: var(--pm-ink-soft); transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(20,24,31,.42); }
.pm-card-save-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }

/* ===== SKILLS TAB (premium) ===== */
.pm-skills-card {
    background: var(--color-surface); border: 1px solid var(--pm-hairline); border-radius: 16px;
    padding: 34px 32px; box-shadow: 0 18px 40px -28px rgba(20,24,31,.5);
    text-align: center;
}
.pm-skills-header { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 10px; }
.pm-skills-header .pm-skills-icon {
    width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--color-accent-900), var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent); font-size: 1.2rem; color: var(--pm-brass-dim);
}
.pm-skills-header h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; color: var(--pm-ink); margin: 0; }
.pm-skills-sub { font-size: .86rem; color: var(--pm-slate-muted); max-width: 560px; margin: 0 auto 26px; line-height: 1.5; }

.pm-skills-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; text-align: left;
}
@media (max-width: 760px) { .pm-skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pm-skills-grid { grid-template-columns: 1fr; } }

.pm-skill-card {
    display: flex; align-items: center; gap: 12px; padding: 20px 16px;
    border: 1.5px solid var(--pm-hairline); border-radius: 11px; cursor: pointer;
    transition: all .2s; background: var(--pm-ivory); position: relative;
}
.pm-skill-card:hover { border-color: var(--pm-brass-dim); background: var(--color-surface); box-shadow: 0 8px 18px -14px rgba(20,24,31,.35); }
.pm-skill-card.pm-on { border-color: var(--pm-brass); background: linear-gradient(145deg, var(--color-accent-900), var(--color-surface)); box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.pm-skill-card input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pm-skill-box {
    width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--pm-hairline);
    background: var(--color-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; color: transparent;
}
.pm-skill-card.pm-on .pm-skill-box { background: var(--pm-brass); border-color: var(--pm-brass); color: var(--color-bg); }
.pm-skill-check { display: block; }
.pm-skill-label { font-size: .92rem; color: var(--pm-ink); font-weight: 500; line-height: 1.35; }

.pm-skills-save { margin: 0 auto; }


/* ===== SAVE STATUS ===== */
.pm-save-status { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 600; color: var(--pm-emerald); margin: 0 auto 18px; max-width: 900px; justify-content: flex-end; padding: 0 12px; }
.pm-save-status.pm-dirty { color: var(--pm-amber); }
.pm-save-status .pm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

@media (max-width: 640px) {
    .pm-stat-grid, .pm-badge-toggle-row { grid-template-columns: 1fr; }
    .pm-badge-toggle { min-width: 0; }
}