/**
 * Logistics Platform - Frontend Stylesheet
 * Covers all shortcode template styling.
 */

/* ── Reset & Wrapper ──────────────────────────────────── */
.lp-wrap { max-width: 1200px; margin: 0 auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #333; }
.lp-wrap * { box-sizing: border-box; }

/* ── Headers ──────────────────────────────────────────── */
.lp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.lp-header h2 { margin: 0; font-size: 22px; }

/* ── Buttons ──────────────────────────────────────────── */
.lp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; transition: all .2s; text-decoration: none; color: #333; }
.lp-btn:hover { background: #f5f5f5; }
.lp-btn-primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.lp-btn-primary:hover { background: #1557b0; color: #fff; }
.lp-btn-danger { color: #dc3545; border-color: #dc3545; }
.lp-btn-danger:hover { background: #dc3545; color: #fff; }
.lp-btn-sm { padding: 4px 10px; font-size: 12px; }
.lp-btn-lg { padding: 12px 28px; font-size: 15px; }

/* ── Tables ───────────────────────────────────────────── */
.lp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.lp-table thead { background: #f8f9fa; }
.lp-table th, .lp-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eee; font-size: 13px; }
.lp-table th { font-weight: 600; color: #555; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.lp-table tbody tr:hover { background: #f8f9ff; }
.lp-no-data { text-align: center; color: #999; padding: 30px !important; }

/* ── Sections ─────────────────────────────────────────── */
.lp-rates-section, .lp-section { margin-bottom: 25px; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.lp-rates-section h3, .lp-section h3 { margin: 0 0 5px; font-size: 17px; }
.lp-description { color: #777; font-size: 13px; margin: 0 0 15px; }

/* ── Toggle Switch (QadoShop pattern) ─────────────────── */
.lp-toggle { position: relative; display: inline-block; width: 38px; height: 20px; }
.lp-toggle input { opacity: 0; width: 0; height: 0; }
.lp-toggle-slider { position: absolute; cursor: pointer; inset: 0; background: #ccc; border-radius: 20px; transition: .3s; }
.lp-toggle-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .3s; }
input:checked + .lp-toggle-slider { background: #4caf50; }
input:checked + .lp-toggle-slider::before { transform: translateX(18px); }

/* ── Badges ───────────────────────────────────────────── */
.lp-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.lp-badge-warning { background: #fff3cd; color: #856404; }
.lp-badge-success, .lp-badge-delivered { background: #d4edda; color: #155724; }
.lp-badge-info, .lp-badge-in_transit { background: #d1ecf1; color: #0c5460; }
.lp-badge-danger, .lp-badge-cancelled { background: #f8d7da; color: #721c24; }
.lp-badge-pending { background: #fff3cd; color: #856404; }
.lp-badge-assigned { background: #cce5ff; color: #004085; }

/* ── Notices ──────────────────────────────────────────── */
.lp-notice { padding: 14px 18px; border-radius: 6px; margin: 15px 0; font-size: 14px; }
.lp-notice-warning { background: #fff3cd; color: #856404; border-left: 4px solid #ffc107; }
.lp-notice-error { background: #f8d7da; color: #721c24; border-left: 4px solid #dc3545; }
.lp-notice-info { background: #d1ecf1; color: #0c5460; border-left: 4px solid #17a2b8; }

/* ── Forms ────────────────────────────────────────────── */
.lp-form-row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.lp-form-group { flex: 1; min-width: 200px; }
.lp-form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; color: #444; }
.lp-form-group input, .lp-form-group select, .lp-form-group textarea { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; transition: border .2s; }
.lp-form-group input:focus, .lp-form-group select:focus { border-color: #1a73e8; outline: none; box-shadow: 0 0 0 3px rgba(26,115,232,.12); }
.lp-form-group small { color: #888; font-size: 12px; margin-top: 3px; display: block; }
.lp-form-group input[type="checkbox"] { width: auto; margin-right: 6px; }
.lp-flex-center { display: flex; align-items: center; padding-top: 25px; }
.lp-poa-box { background: #f0f7ff; padding: 15px; border-radius: 8px; margin-top: 10px; }
.lp-poa-box small { display: block; margin-top: 5px; color: #666; }

/* ── Modal — Item 10 FIX: z-index guaranteed above all themes/page builders ── */
.lp-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 999999 !important; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.lp-modal-content { background: #fff; border-radius: 12px; width: 92%; max-width: 640px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); position: relative; z-index: 1000000 !important; }
.lp-modal-header { padding: 16px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.lp-modal-header h3 { margin: 0; font-size: 17px; }
.lp-modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #888; }
.lp-modal-body { padding: 20px; }
.lp-modal-footer { padding: 14px 20px; border-top: 1px solid #eee; text-align: right; display: flex; gap: 10px; justify-content: flex-end; }

/* ── Tracking ─────────────────────────────────────────── */
.lp-track-form { display: flex; gap: 10px; margin-bottom: 20px; }
.lp-track-form input { flex: 1; padding: 12px; border: 2px solid #ddd; border-radius: 8px; font-size: 15px; }
.lp-track-card { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lp-track-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 16px; font-weight: 700; }

/* ── Timeline ─────────────────────────────────────────── */
.lp-timeline { padding-left: 20px; border-left: 3px solid #e0e0e0; }
.lp-timeline-item { position: relative; padding: 0 0 20px 20px; }
.lp-timeline-dot { position: absolute; left: -11px; top: 4px; width: 12px; height: 12px; background: #1a73e8; border-radius: 50%; border: 2px solid #fff; }
.lp-timeline-item:last-child .lp-timeline-dot { background: #4caf50; }
.lp-timeline-content strong { font-size: 13px; text-transform: capitalize; }
.lp-timeline-content p { margin: 3px 0; font-size: 13px; color: #666; }
.lp-timeline-content small { font-size: 11px; color: #999; }

/* ── Rate Cards (calculator results) ──────────────────── */
.lp-rate-card { display: flex; align-items: center; gap: 15px; padding: 14px 18px; border: 1px solid #eee; border-radius: 8px; margin-bottom: 10px; background: #fff; transition: box-shadow .2s; }
.lp-rate-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lp-rate-card-icon { font-size: 28px; }
.lp-rate-card-info { flex: 1; }
.lp-rate-card-info strong { display: block; font-size: 14px; }
.lp-rate-meta { font-size: 12px; color: #888; }
.lp-rate-card-price { font-size: 18px; font-weight: 700; color: #1a73e8; white-space: nowrap; }

/* ── Calculator ───────────────────────────────────────── */
.lp-calc-form { background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .lp-form-row { flex-direction: column; }
    .lp-form-group { min-width: 100%; }
    .lp-header { flex-direction: column; align-items: flex-start; }
    .lp-track-form { flex-direction: column; }
    .lp-rate-card { flex-wrap: wrap; }
}

/* ── Toast Notifications ──────────────────────────────── */
.lp-toast { position: fixed; bottom: 20px; right: 20px; padding: 14px 22px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; z-index: 999999; opacity: 0; transform: translateY(10px); transition: all .3s; box-shadow: 0 4px 12px rgba(0,0,0,.15); max-width: 360px; }
.lp-toast-visible { opacity: 1; transform: translateY(0); }
.lp-toast-success { background: #2e7d32; }
.lp-toast-error { background: #c62828; }
.lp-toast-info { background: #1565c0; }

/* ── KPI Grid (shared) ────────────────────────────────── */
.lp-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }
.lp-kpi-card { background: #fff; border-radius: 10px; padding: 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.lp-kpi-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.lp-kpi-value { font-size: 22px; font-weight: 700; display: block; line-height: 1.2; }
.lp-kpi-value small { font-size: 12px; font-weight: 400; color: #888; }
.lp-kpi-label { font-size: 12px; color: #888; display: block; margin-top: 2px; }

/* ── Grid Layouts ─────────────────────────────────────── */
.lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 768px) { .lp-grid-2 { grid-template-columns: 1fr; } .lp-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Dispatch Dialing Overlay (Phone-Call Style) ──────── */
/* ── Dispatch alert overlay — colours driven by CSS variables set by dispatch.js ── */
#lp-dialing-overlay{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
#lp-dialing-overlay.lp-dial-visible{opacity:1}
.lp-dial-bg{position:absolute;inset:0;background:linear-gradient(150deg,var(--lp-dial-bg-from,#f8f9fa) 0%,var(--lp-dial-bg-to,#e9ecef) 100%);opacity:var(--lp-dial-bg-opacity,.97)}
.lp-dial-content{position:relative;z-index:1;text-align:center;color:var(--lp-dial-text-primary,#212529);padding:36px 28px;max-width:400px;width:100%}
.lp-dial-pulse{position:relative;width:120px;height:120px;margin:0 auto 22px;display:flex;align-items:center;justify-content:center}
.lp-dial-pulse-ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--lp-dial-ring-color,rgba(26,115,232,.35));animation:lp-ring-pulse 2s ease-out infinite}
.lp-dial-pulse-ring.lp-ring-2{animation-delay:1s}
@keyframes lp-ring-pulse{0%{transform:scale(.8);opacity:1}100%{transform:scale(1.7);opacity:0}}
.lp-dial-icon{font-size:56px;animation:lp-shake .5s ease-in-out infinite}
.lp-dial-card{background:var(--lp-dial-card-bg,#fff);border:1px solid var(--lp-dial-card-border,#dee2e6);border-radius:16px;padding:18px 20px;margin:14px 0;box-shadow:0 4px 20px rgba(0,0,0,.08)}
.lp-dial-title{font-size:21px;font-weight:600;margin:0 0 6px;letter-spacing:.3px;color:var(--lp-dial-text-primary,#212529)}
.lp-dial-tracking{font-size:16px;font-weight:700;margin:0 0 4px;color:var(--lp-dial-text-primary,#212529)}
.lp-dial-receiver{font-size:14px;margin:0 0 3px;color:var(--lp-dial-text-muted,#6c757d)}
.lp-dial-payout{font-size:22px;font-weight:800;margin:8px 0 0;color:var(--lp-dial-payout-color,#2e7d32)}
.lp-dial-countdown{margin:20px 0}
.lp-dial-countdown span{font-size:52px;font-weight:200;display:block;color:var(--lp-dial-text-primary,#212529)}
.lp-dial-countdown small{font-size:12px;color:var(--lp-dial-text-muted,#6c757d)}
.lp-dial-actions{display:flex;justify-content:center;gap:48px;margin-top:28px}
.lp-dial-btn{width:70px;height:70px;border-radius:50%;border:none;font-size:28px;font-weight:700;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center}
.lp-dial-btn:hover{transform:scale(1.08)}
.lp-dial-btn:active{transform:scale(.95)}
.lp-dial-accept{background:var(--lp-dial-accept-color,#4caf50);box-shadow:0 4px 18px rgba(76,175,80,.4)}
.lp-dial-reject{background:var(--lp-dial-reject-color,#f44336);box-shadow:0 4px 18px rgba(244,67,54,.4)}
.lp-dial-labels{display:flex;justify-content:center;gap:48px;margin-top:8px}
.lp-dial-labels span{width:70px;text-align:center;font-size:12px;color:var(--lp-dial-text-muted,#6c757d)}
.lp-dial-route{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 4px;padding:8px 14px;background:rgba(0,0,0,.05);border-radius:8px;font-size:14px;color:var(--lp-dial-text-primary,#212529)}
.lp-dial-route-from,.lp-dial-route-to{font-weight:600}
.lp-dial-route-arrow{color:var(--lp-dial-text-muted,#6c757d);font-size:16px}
.lp-dial-pickup{margin:8px auto;padding:8px 14px;background:rgba(0,0,0,.04);border-radius:6px;border-left:3px solid var(--lp-dial-accept-color,#4caf50);text-align:left;max-width:300px}
.lp-dial-pickup small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1.5px;color:var(--lp-dial-text-muted,#6c757d);margin-bottom:2px}
.lp-dial-pickup span{display:block;font-size:13px;color:var(--lp-dial-text-primary,#212529)}
.lp-dial-addr{color:var(--lp-dial-text-muted,#6c757d);font-size:11px!important}
.lp-dial-details{font-size:13px;margin:6px 0 0;color:var(--lp-dial-text-muted,#6c757d)}
.lp-dial-priority{display:inline-block;padding:3px 10px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:1px;margin:6px 0 2px}
.lp-dial-priority-express{background:rgba(255,152,0,.12);color:#e65100;border:1px solid rgba(255,152,0,.3)}
.lp-dial-priority-urgent{background:rgba(244,67,54,.1);color:#c62828;border:1px solid rgba(244,67,54,.25);animation:lp-urgent-pulse 1s ease-in-out infinite alternate}
@keyframes lp-urgent-pulse { from { opacity: .7; } to { opacity: 1; } }

/* ═══ Centralised Modal Alert System ═══ */
.lp-modal-overlay{position:fixed;inset:0;z-index:2147483640;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s ease;padding:16px}
.lp-modal-overlay.lp-modal-visible{opacity:1}
.lp-modal-box{background:#fff;border-radius:18px;padding:32px 28px 24px;max-width:400px;width:100%;text-align:center;transform:scale(.88) translateY(12px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 25px 60px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.06)}
.lp-modal-visible .lp-modal-box{transform:scale(1) translateY(0)}
.lp-modal-logo{margin-bottom:12px}
.lp-modal-logo img{max-height:28px;width:auto;opacity:.7}
.lp-modal-icon{margin-bottom:14px;display:flex;align-items:center;justify-content:center}
.lp-modal-icon svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.08))}
.lp-modal-title{font-size:18px;font-weight:700;margin:0 0 8px;color:#1a1a2e;letter-spacing:-.2px}
.lp-modal-message{font-size:14px;color:#5f6368;margin:0 0 22px;line-height:1.6}
.lp-modal-body-html{text-align:left;margin:0 0 20px;font-size:13px;width:100%}.lp-modal-body-html input,.lp-modal-body-html select,.lp-modal-body-html textarea{font-family:inherit}.lp-modal-box:has(.lp-modal-body-html){max-width:560px}
.lp-modal-form-overlay{align-items:flex-start;padding:40px 16px}.lp-modal-form-overlay .lp-modal-box.lp-modal-form{max-width:560px;width:100%;padding:0;text-align:left;border-radius:12px;overflow:hidden}.lp-modal-form-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #eee;background:#f8f9fa}.lp-modal-form-title{margin:0;font-size:15px;font-weight:700;color:#333}.lp-modal-form-close{background:none;border:none;font-size:22px;line-height:1;color:#888;cursor:pointer;padding:0 4px;border-radius:4px;transition:color .15s}.lp-modal-form-close:hover{color:#333;background:#e8e8e8}.lp-modal-form-body{padding:20px;overflow-y:auto;max-height:80vh;font-size:13px}.lp-modal-form-body input,.lp-modal-form-body select,.lp-modal-form-body textarea{font-family:inherit}.lp-modal-form .lp-modal-icon{display:none}
.lp-modal-input-wrap{margin:0 0 20px}
.lp-modal-input{width:100%;padding:12px 14px;border:2px solid #e0e0e0;border-radius:10px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.lp-modal-input:focus{border-color:#1a73e8;box-shadow:0 0 0 3px rgba(26,115,232,.12)}
.lp-modal-input.lp-input-error{border-color:#f44336;box-shadow:0 0 0 3px rgba(244,67,54,.12);animation:lpShake .4s}
@keyframes lpShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.lp-modal-btns{display:flex;gap:10px;justify-content:center}
.lp-modal-btn{min-width:110px;padding:11px 22px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-family:inherit}
.lp-modal-btn-ok{color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.lp-modal-btn-ok:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.16)}
.lp-modal-btn-ok:active{transform:translateY(0)}
.lp-modal-btn-cancel{background:#f5f5f5;border:1px solid #e0e0e0;color:#555}
.lp-modal-btn-cancel:hover{background:#ebebeb;color:#333}
/* Type-specific accent bars */
.lp-modal-success{border-top:3px solid #00c853}
.lp-modal-error{border-top:3px solid #f44336}
.lp-modal-warning,.lp-modal-confirm{border-top:3px solid #ff9800}
.lp-modal-info{border-top:3px solid #1a73e8}
.lp-modal-prompt{border-top:3px solid #1a73e8}
.lp-modal-login{border-top:3px solid #1a73e8}
/* Responsive */
@media(max-width:480px){.lp-modal-box{padding:24px 20px 20px;border-radius:14px;max-width:95%}.lp-modal-btns{flex-direction:column}.lp-modal-btn{width:100%}}

/* ═══ Item 6: Validation Styles ═══ */
.lp-input-error{border-color:#f44336 !important;box-shadow:0 0 0 2px rgba(244,67,54,.15) !important}
.lp-field-error{display:block;color:#f44336;font-size:12px;margin-top:3px;font-weight:500}

/* ═══ Item 7: Prohibited Items ═══ */
.lp-prohibited-items{background:#fff3e0;border:1px solid #ffe0b2;border-radius:10px;padding:14px 18px;margin:12px 0;font-size:13px}
.lp-prohibited-items h4{margin:0 0 8px;font-size:14px;color:#e65100}
.lp-prohibited-items ul{margin:0;padding-left:18px}
.lp-prohibited-items li{margin-bottom:4px;line-height:1.4}

/* ═══ Item 8: Face Verification ═══ */
.lp-face-verify{background:#1a1a2e;border-radius:16px;overflow:hidden;max-width:400px;margin:20px auto}
.lp-face-verify-header{text-align:center;padding:30px 20px 20px;color:#fff}
.lp-face-verify-icon{font-size:64px;margin-bottom:12px;display:block}
.lp-face-verify-header h3{color:#fff;margin:0 0 8px;font-size:20px}
.lp-face-verify-header p{color:#aaa;margin:0;font-size:13px}
.lp-face-camera{position:relative;width:240px;height:240px;margin:0 auto 20px;border-radius:50%;overflow:hidden;border:3px dashed #4caf50}
.lp-face-camera video,.lp-face-camera img{width:100%;height:100%;object-fit:cover}
.lp-face-progress{text-align:center;color:#fff;padding:0 20px 10px}
.lp-face-progress-bar{height:6px;background:#333;border-radius:3px;margin:8px 20px;overflow:hidden}
.lp-face-progress-fill{height:100%;background:#4caf50;border-radius:3px;transition:width .3s}
.lp-face-actions{padding:15px 20px 25px;text-align:center}
.lp-face-btn{width:100%;padding:14px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;background:#7c4dff;color:#fff}
.lp-face-btn:hover{background:#651fff}
.lp-face-success{text-align:center;padding:40px 20px;color:#fff}
.lp-face-success-icon{font-size:64px;display:block;margin-bottom:16px}

/* ═══ Item 9: Dimension Fields ═══ */
.lp-dimension-row{display:flex;gap:8px}
.lp-dimension-row .lp-form-group{flex:1}
@media(max-width:600px){.lp-dimension-row{flex-wrap:wrap}.lp-dimension-row .lp-form-group{flex:1 1 45%}}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN SETTINGS — Tab bar, panels, rows, cards, description text
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tab navigation bar ─────────────────────────────────────────── */
.lp-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  margin-bottom: 20px;
}
.lp-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  transition: background .15s, color .15s;
  white-space: nowrap;
  font-family: inherit;
}
.lp-tab:hover { background: #f0f4ff; color: #1a73e8; }
.lp-tab.lp-tab-active {
  background: #1a73e8;
  color: #fff;
  border-color: #1557b0;
  box-shadow: 0 1px 3px rgba(26,115,232,.3);
}

/* ── Tab panels ─────────────────────────────────────────────────── */
.lp-tab-panel { display: none; }
.lp-tab-panel.lp-tab-active { display: block; }

/* ── Settings rows & inputs ─────────────────────────────────────── */
.lp-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.lp-setting-row:last-child { border-bottom: none; }
.lp-setting-row label {
  flex: 1 1 200px;
  font-weight: 500;
  color: #444;
  line-height: 1.4;
}
.lp-setting-row label small {
  display: block;
  font-weight: 400;
  color: #888;
  font-size: 11px;
  margin-top: 2px;
}
.lp-setting-input {
  width: 90px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  text-align: right;
  font-family: inherit;
}
.lp-setting-input[type="text"],
.lp-setting-input[type="email"],
.lp-setting-input[type="url"] {
  text-align: left;
  width: 260px;
}
.lp-setting-input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26,115,232,.15);
}

/* ── Description text ───────────────────────────────────────────── */
.lp-desc {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 14px;
}

/* ── Requirement / verification cards ───────────────────────────── */
.lp-req-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .15s;
}
.lp-req-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.lp-req-card.lp-req-disabled { opacity: .55; }
.lp-req-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.lp-req-header strong { font-size: 14px; color: #333; }
.lp-req-meta { font-size: 12px; color: #888; }
.lp-req-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lp-toggle-req { cursor: pointer; font-size: 12px; }

/* ── Vehicle type cards ─────────────────────────────────────────── */
.lp-vtype-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.lp-vtype-card .lp-vtype-icon { font-size: 24px; flex-shrink: 0; }
.lp-vtype-card .lp-vtype-name { font-weight: 600; font-size: 14px; }
.lp-vtype-card .lp-vtype-meta { font-size: 12px; color: #888; margin-top: 2px; }
.lp-vtype-card .lp-vtype-actions { margin-left: auto; display: flex; gap: 6px; }

/* ── Doc review grid (driver verification) ──────────────────────── */
.lp-doc-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.lp-doc-review-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-dri-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 12px;
}
.lp-dri-file img { border-radius: 4px; display: block; }
.lp-dri-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }

/* ── Sound / ringtone preview ───────────────────────────────────── */
.lp-sound-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
  margin: 4px 0;
}

/* ── Dial preset buttons ────────────────────────────────────────── */
.lp-dial-preset {
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background .15s;
}
.lp-dial-preset:hover { background: #e8eeff; border-color: #1a73e8; color: #1a73e8; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .lp-tabs-bar { padding: 8px; gap: 3px; }
  .lp-tab { padding: 6px 9px; font-size: 12px; }
  .lp-setting-row { flex-direction: column; align-items: flex-start; }
  .lp-setting-input { width: 100%; text-align: left; }
  .lp-doc-review-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ── Status Dots (replaces emoji coloured circles) ─────────────────────── */
.lp-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    vertical-align: middle;
    flex-shrink: 0;
}
.lp-dot-green  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.20); }
.lp-dot-yellow { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.20); }
.lp-dot-red    { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.20); }
.lp-dot-grey   { background: #cbd5e1; }

/* ── Empty State ────────────────────────────────────────────────────────── */
.lp-empty-state { box-sizing: border-box; width: 100%; }
.lp-empty-state .lp-empty-icon svg { display: block; }
.lp-empty-state .lp-empty-title { font-size: 15px; font-weight: 700; color: #1e293b; }
.lp-empty-state .lp-empty-body  { font-size: 13px; color: #64748b; }

/* ── Visual Icon Picker ──────────────────────────────────────────────────── */
.lp-icon-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.lp-icon-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
    padding: 0;
    flex-shrink: 0;
}
.lp-icon-pill:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
    color: #1e293b;
}
.lp-icon-pill.lp-icon-pill-active {
    border-color: #2271b1;
    background: #eff6ff;
    color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}
.lp-icon-pill svg { display: block; pointer-events: none; }


/* ── Password visibility toggle ───────────────────────────── */
.lp-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.lp-pw-wrap input[type="password"],
.lp-pw-wrap input[type="text"] {
    flex: 1;
    padding-right: 42px !important;
    width: 100%;
}
.lp-pw-eye {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    transition: color .15s, background .15s;
    flex-shrink: 0;
    line-height: 1;
}
.lp-pw-eye:hover { color: #374151; background: rgba(0,0,0,.06); }
.lp-pw-eye:focus-visible { outline: 2px solid #e65c00; outline-offset: 1px; }
.lp-pw-svg { display: block; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════
   Responsive Table — card-stack pattern on mobile
   Wrap any lp-table with <div class="lp-table-responsive"> and add
   data-label="Column Name" on every <td> to get auto-labelled rows.
   ═══════════════════════════════════════════════════════════════════ */
.lp-table-responsive {
    width: 100%;
    overflow-x: auto;   /* horizontal scroll safety net for very wide tables */
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    /* Kill horizontal scroll — we go card-stack instead */
    .lp-table-responsive { overflow-x: hidden; }

    .lp-table-responsive .lp-table {
        border: 0;
        box-shadow: none;
        background: transparent;
        border-radius: 0;
    }

    /* Hide column headers */
    .lp-table-responsive .lp-table thead { display: none; }

    /* Each row becomes a rounded card */
    .lp-table-responsive .lp-table tbody tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #e8eaf0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,.06);
        background: #fff;
    }

    /* Skip the empty-state spanning row */
    .lp-table-responsive .lp-table tbody tr td[colspan] {
        display: block;
        padding: 0;
        border: 0;
    }

    /* Each cell becomes a labelled row */
    .lp-table-responsive .lp-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 14px;
        border-bottom: 1px solid #f3f4f6;
        font-size: 13px;
        gap: 10px;
        text-align: right;
    }

    .lp-table-responsive .lp-table tbody td:last-child {
        border-bottom: 0;
    }

    /* Column label from data-label attribute */
    .lp-table-responsive .lp-table tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        color: #9ca3af;
        flex-shrink: 0;
        text-align: left;
        white-space: nowrap;
    }

    /* Description / long-text cells: stack label above content */
    .lp-table-responsive .lp-table tbody td.lp-td-full,
    .lp-table-responsive .lp-table tbody td[data-label="Description"],
    .lp-table-responsive .lp-table tbody td[data-label="Reason"],
    .lp-table-responsive .lp-table tbody td[data-label="Notes"],
    .lp-table-responsive .lp-table tbody td[data-label="Address"] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 3px;
    }

    /* Amount cells — keep amount right-aligned for readability */
    .lp-table-responsive .lp-table tbody td[data-label="Amount"],
    .lp-table-responsive .lp-table tbody td[data-label="Balance"],
    .lp-table-responsive .lp-table tbody td[data-label="Cost"],
    .lp-table-responsive .lp-table tbody td[data-label="Payout"],
    .lp-table-responsive .lp-table tbody td[data-label="Earnings"] {
        font-weight: 600;
    }

    /* Badges stay inline */
    .lp-table-responsive .lp-table tbody td .lp-badge {
        font-size: 11px;
    }

    /* Actions cells — stack buttons vertically */
    .lp-table-responsive .lp-table tbody td.lp-td-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    .lp-table-responsive .lp-table tbody td.lp-td-actions::before { display: none; }
    .lp-table-responsive .lp-table tbody td.lp-td-actions .lp-btn { width: 100%; text-align: center; }
}

/* ── Settings-scoped tab panels (avoids global .lp-tab-panel conflicts) ── */
.lp-settings-panel { display: none; }
.lp-settings-panel.lp-settings-panel-active { display: block; }