/**
 * smj-roles.css — Role selector, dealer registration, dashboard enhancements
 * Scoped to .smj-reg-wrap and .smj-db to avoid theme conflicts
 */

/* ── Registration wrapper ─────────────────────────────────────────────────── */
.smj-reg-wrap .tmp-auth-box {
    max-width: 680px;
}
.smj-reg-subtitle {
    color: var(--smj-text-secondary);
    margin: -8px 0 20px;
    font-size: 14px;
}

/* ── Role selector cards ─────────────────────────────────────────────────── */
.smj-role-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 0 0 28px;
}
.smj-role-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px;
    border: 2px solid var(--smj-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
    text-align: center;
    background: var(--smj-bg);
    user-select: none;
}
.smj-role-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.smj-role-card:hover {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.smj-role-card--active {
    border-color: #6366f1;
    background: #f5f3ff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}
.smj-role-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 8px;
}
.smj-role-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--smj-text-primary);
    display: block;
}
.smj-role-desc {
    font-size: 12px;
    color: var(--smj-text-secondary);
    margin-top: 4px;
    display: block;
}

/* ── Field sections toggle ───────────────────────────────────────────────── */
.smj-role-fields--hidden {
    display: none !important;
}
.smj-role-fields {
    animation: smjFadeIn .2s ease;
}
@keyframes smjFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Dealer section label ────────────────────────────────────────────────── */
.smj-dealer-section-label,
.smj-form-section-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--smj-text-secondary);
    margin-bottom: 14px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--smj-border);
}

/* ── Optional badge ──────────────────────────────────────────────────────── */
.smj-optional {
    font-size: 11px;
    font-weight: 400;
    color: var(--smj-text-secondary);
}

/* ── File upload area ────────────────────────────────────────────────────── */
.smj-upload-area {
    position: relative;
}
.smj-file-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.smj-upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 20px 12px;
    border: 2px dashed var(--smj-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s, background .18s;
    background: var(--smj-light-section);
    text-align: center;
}
.smj-upload-label:hover {
    border-color: #6366f1;
    background: #f5f3ff;
}
.smj-upload-icon { font-size: 24px; }
.smj-upload-text {
    font-size: 13px;
    color: var(--smj-text-primary);
    font-weight: 500;
}
.smj-upload-filename {
    font-size: 11px;
    color: var(--smj-text-secondary);
}
.smj-file-hint {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--smj-text-secondary);
    margin-top: 2px;
}

/* ── Verification note ───────────────────────────────────────────────────── */
.smj-verification-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    margin: 20px 0 0;
    font-size: 13px;
    color: var(--smj-secondary-hover);
    line-height: 1.5;
}
.smj-verification-note span { font-size: 18px; flex-shrink: 0; }

/* ── Form validation ─────────────────────────────────────────────────────── */
.smj-field-error {
    display: block;
    font-size: 12px;
    color: #dc2626;
    margin-top: 4px;
}
.smj-input-error {
    border-color: #dc2626 !important;
}

/* ── Dashboard: Verification card ───────────────────────────────────────── */
.smj-verify-card {
    padding: 20px 24px;
    border-radius: 12px;
    margin-bottom: 24px;
    border: 2px solid;
}
.smj-verify-card--pending  { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.smj-verify-card--verified { background: #f0fdf4; border-color: #86efac; color: #14532d; }
.smj-verify-card--rejected { background: #fef2f2; border-color: #fca5a5; color: #7f1d1d; }
.smj-verify-badge {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}
.smj-verify-note {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0,0,0,.06);
    border-radius: 6px;
    font-size: 13px;
}
.smj-verify-docs h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
}
.smj-doc-card {
    padding: 16px;
    border: 1px solid var(--smj-border);
    border-radius: 10px;
    background: #fafafa;
}
.smj-doc-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}
.smj-doc-missing {
    font-size: 13px;
    color: var(--smj-text-secondary);
}

/* ── Dashboard: Leads table ──────────────────────────────────────────────── */
.smj-leads-table-wrap {
    overflow-x: auto;
}
.smj-leads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.smj-leads-table th {
    background: var(--smj-light-section);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    color: var(--smj-text-primary);
    border-bottom: 2px solid var(--smj-border);
    white-space: nowrap;
}
.smj-leads-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--smj-border);
    vertical-align: top;
}
.smj-lead-row--unread td {
    background: #eff6ff;
}
.smj-lead-email {
    font-size: 12px;
    color: var(--smj-text-secondary);
    text-decoration: none;
}
.smj-lead-email:hover { text-decoration: underline; }
.smj-lead-msg { max-width: 200px; color: var(--smj-text-secondary); }
.smj-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}
.smj-badge--new  { background: #dbeafe; color: var(--smj-secondary-hover); }
.smj-badge--read { background: var(--smj-light-section); color: var(--smj-text-secondary); }

/* ── Dashboard full-width fix for dealer nav item ───────────────────────── */
.smj-db__nav-item--verification .smj-db__nav-link {
    color: var(--smj-cta-hover);
}
.smj-db__nav-item--verification.smj-db__nav-item--active .smj-db__nav-link {
    color: var(--smj-cta-hover);
    background: #fffbeb;
}

/* ── Role badge in nav ───────────────────────────────────────────────────── */
.smj-db__user-role-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-top: 4px;
}
.smj-db__user-role-badge--individual { background: #dbeafe; color: #1e40af; }
.smj-db__user-role-badge--dealer     { background: #fef3c7; color: #92400e; }
.smj-db__user-role-badge--verified   { background: #d1fae5; color: #065f46; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .smj-role-selector { grid-template-columns: 1fr; }
    .smj-reg-wrap .tmp-auth-box { padding: 20px 16px; }
    .smj-leads-table th,
    .smj-leads-table td { padding: 8px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   OTP UI — Phone verification flow (Dealer registration)
══════════════════════════════════════════════════════════════════════════ */
.smj-otp-phone-wrap {
    display:         flex;
    gap:             8px;
    align-items:     stretch;
}
.smj-otp-phone-input {
    flex: 1;
    min-width: 0;
}
.smj-otp-send-btn,
.smj-otp-verify-btn {
    flex-shrink:     0;
    padding:         0 16px;
    background:      #6366f1;
    color:           var(--smj-bg);
    border:          none;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background .15s, opacity .15s;
    height:          42px;
    line-height:     42px;
}
.smj-otp-send-btn:hover,
.smj-otp-verify-btn:hover  { background: #4f46e5; }
.smj-otp-send-btn:disabled,
.smj-otp-verify-btn:disabled { opacity: .55; cursor: not-allowed; }

/* OTP entry row */
.smj-otp-entry {
    display:         flex;
    gap:             8px;
    margin-top:      10px;
    align-items:     stretch;
    animation:       smjFadeIn .2s ease;
}
.smj-otp-input {
    flex:            1;
    padding:         10px 14px;
    border:          1.5px solid var(--smj-border);
    border-radius:   8px;
    font-size:       18px;
    letter-spacing:  .25em;
    text-align:      center;
    font-family:     monospace;
    min-width:       0;
    transition:      border-color .15s;
}
.smj-otp-input:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }

/* Status messages */
.smj-otp-status {
    font-size:       13px;
    margin-top:      6px;
    min-height:      18px;
    line-height:     1.4;
}
.smj-otp-status--success { color: #059669; }
.smj-otp-status--error   { color: #dc2626; }
.smj-otp-status--info    { color: var(--smj-secondary); }

/* Verified state */
.smj-otp-verified-msg {
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         8px 12px;
    background:      #d1fae5;
    color:           #065f46;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     600;
}

/* ══════════════════════════════════════════════════════════════════════════
   MAP PICKER — Registration form
══════════════════════════════════════════════════════════════════════════ */
.smj-map-note {
    font-size:       13px;
    color:           var(--smj-text-secondary);
    margin:          -8px 0 12px;
}
.smj-reg-map {
    border:          1.5px solid var(--smj-border);
    border-radius:   12px;
    overflow:        hidden;
    background:      var(--smj-light-section);
}
.smj-reg-map__inner { min-height: 80px; }

.smj-reg-map__placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         24px;
    font-size:       13px;
    color:           var(--smj-text-secondary);
    text-align:      center;
}
.smj-reg-map__placeholder span { font-size: 28px; }

.smj-map-open-btn,
.smj-map-change-btn {
    padding:         8px 18px;
    border:          1.5px solid #6366f1;
    border-radius:   8px;
    background:      var(--smj-bg);
    color:           #6366f1;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background .15s, color .15s;
}
.smj-map-open-btn:hover,
.smj-map-change-btn:hover { background: #6366f1; color: var(--smj-bg); }

.smj-reg-map__pin-info {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    background:      #f0fdf4;
    border-top:      1px solid #bbf7d0;
    font-size:       13px;
    color:           #065f46;
    font-weight:     500;
}

/* ══════════════════════════════════════════════════════════════════════════
   MAP — Business Profile dashboard tab
══════════════════════════════════════════════════════════════════════════ */
.smj-location-map-wrap {
    border:          1.5px solid var(--smj-border);
    border-radius:   12px;
    overflow:        hidden;
}
.smj-location-meta {
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         10px 14px;
    background:      var(--smj-light-section);
    border-top:      1px solid var(--smj-border);
    font-size:       13px;
    color:           var(--smj-text-primary);
}
.smj-location-coords {
    margin-left:     auto;
    font-size:       11px;
    color:           var(--smj-text-secondary);
    font-family:     monospace;
}
.smj-location-missing {
    font-size:       13px;
    color:           var(--smj-text-secondary);
    padding:         14px;
    background:      var(--smj-light-section);
    border:          1.5px dashed var(--smj-border);
    border-radius:   10px;
}
.smj-location-edit-row {
    display:         flex;
    align-items:     center;
    gap:             10px;
}
.smj-profile-map-picker {
    border:          1.5px solid var(--smj-border);
    border-radius:   12px;
    overflow:        hidden;
    animation:       smjFadeIn .2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   Verification status chips — Business Profile tab
══════════════════════════════════════════════════════════════════════════ */
.smj-profile-verif-row {
    display:         flex;
    gap:             10px;
    flex-wrap:       wrap;
    margin-bottom:   20px;
}
.smj-profile-verif-chip {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         6px 14px;
    border-radius:   999px;
    font-size:       12px;
    font-weight:     600;
}
.smj-profile-verif-chip--ok { background: #d1fae5; color: #065f46; }
.smj-profile-verif-chip--no { background: #fef3c7; color: #92400e; }
.smj-profile-verif-link {
    color:           inherit;
    text-decoration: underline;
    font-weight:     400;
}

/* ── Dual OTP instructions block ─────────────────────────────────────────── */
.smj-otp-instructions {
    padding:         12px 14px;
    background:      #eff6ff;
    border:          1px solid #bfdbfe;
    border-radius:   8px;
    margin-top:      10px;
    font-size:       13px;
    line-height:     1.6;
    color:           #1e40af;
    animation:       smjFadeIn .2s ease;
}
.smj-otp-hint {
    display:         block;
    margin-top:      4px;
    font-size:       12px;
    color:           #6366f1;
    font-weight:     500;
}
/* OTP input wider for 6 digits */
.smj-otp-input {
    min-width:  160px;
}

/* ── OTP button positioned under email field ────────────────────────────── */
.smj-otp-send-btn--email {
    display:         block;
    width:           100%;
    margin-top:      10px;
    padding:         11px 16px;
    background:      #6366f1;
    color:           var(--smj-bg);
    border:          none;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    text-align:      center;
    transition:      background .15s, opacity .15s;
    height:          auto;
    line-height:     1.4;
}
.smj-otp-send-btn--email:hover   { background: #4f46e5; }
.smj-otp-send-btn--email:disabled { opacity: .55; cursor: not-allowed; }

/* ── Persisted upload preview (survives error redirect) ─────────────────── */
.smj-upload-persisted {
    margin-bottom:   10px;
    padding:         10px;
    background:      #f0fdf4;
    border:          1px solid #86efac;
    border-radius:   8px;
}
.smj-upload-persisted-img {
    display:         block;
    max-width:       100%;
    max-height:      120px;
    border-radius:   6px;
    object-fit:      cover;
    margin-bottom:   6px;
}
.smj-upload-persisted-note {
    font-size:       12px;
    color:           #065f46;
    margin:          0;
    font-weight:     500;
}

/* ── Popup map container ─────────────────────────────────────────────────── */
#smj-popup-map {
    z-index: 0; /* prevent map tiles overlapping modal UI */
}
#smj-popup-map .leaflet-control-attribution {
    font-size: 10px;
}

/* ── Map search box ──────────────────────────────────────────────────────── */
.smj-map-search-wrap {
    margin-bottom:   10px;
}
.smj-map-search-row {
    display:         flex;
    gap:             8px;
    align-items:     stretch;
}
.smj-map-search-input {
    flex:            1;
    padding:         10px 14px;
    border:          1.5px solid var(--smj-border);
    border-radius:   8px;
    font-size:       14px;
    color:           var(--smj-text-primary);
    transition:      border-color .15s;
    min-width:       0;
}
.smj-map-search-input:focus {
    border-color:    #6366f1;
    outline:         none;
    box-shadow:      0 0 0 3px rgba(99,102,241,.12);
}
.smj-map-search-btn {
    padding:         0 16px;
    background:      #6366f1;
    color:           var(--smj-bg);
    border:          none;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background .15s;
    height:          42px;
}
.smj-map-search-btn:hover    { background: #4f46e5; }
.smj-map-search-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Results dropdown */
.smj-map-search-results {
    list-style:      none;
    margin:          4px 0 0;
    padding:         0;
    background:      var(--smj-bg);
    border:          1.5px solid var(--smj-border);
    border-radius:   8px;
    box-shadow:      0 4px 16px rgba(0,0,0,.08);
    max-height:      220px;
    overflow-y:      auto;
    position:        relative;
    z-index:         100;
}
.smj-map-result-item {
    padding:         10px 14px;
    font-size:       13px;
    color:           var(--smj-text-primary);
    cursor:          pointer;
    border-bottom:   1px solid var(--smj-light-section);
    line-height:     1.4;
    transition:      background .1s;
}
.smj-map-result-item:last-child { border-bottom: none; }
.smj-map-result-item:hover,
.smj-map-result-item:focus {
    background:      #eff6ff;
    color:           var(--smj-secondary-hover);
    outline:         none;
}
.smj-map-no-result {
    padding:         12px 14px;
    font-size:       13px;
    color:           var(--smj-text-secondary);
    font-style:      italic;
}
.smj-map-search-hint {
    font-size:       12px;
    color:           var(--smj-text-secondary);
    margin:          6px 0 0;
}