/* ─── PPF Partner Portal Styles ─────────────────────────────────────────── */
:root {
  --ppf-primary: #1a1a2e;
  --ppf-accent:  #e94560;
  --ppf-text:    #1e293b;
  --ppf-muted:   #64748b;
  --ppf-border:  #e2e8f0;
  --ppf-bg:      #f8fafc;
  --ppf-white:   #ffffff;
  --ppf-radius:  10px;
  --ppf-shadow:  0 4px 24px rgba(0,0,0,0.10);
}

.ppf-portal * { box-sizing: border-box; }
.ppf-portal { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--ppf-text); }

/* ── Buttons ── */
.ppf-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; border:none; transition:all .18s; white-space:nowrap; }
.ppf-btn-primary  { background:var(--ppf-primary); color:var(--ppf-button-text); }
.ppf-btn-primary:hover { opacity:.88; color:#fff; }
.ppf-btn-accent   { background:var(--ppf-accent); color:var(--ppf-button-text); }
.ppf-btn-accent:hover { opacity:.85; color:#fff; }
.ppf-btn-outline  { background:transparent; color:var(--ppf-primary); border:2px solid var(--ppf-primary); }
.ppf-btn-outline:hover { background:var(--ppf-primary); color:#fff; }
.ppf-btn-danger   { background:var(--ppf-danger); color:var(--ppf-button-text); }
.ppf-btn-danger:hover { background:#dc2626; color:#fff; }
.ppf-btn-full  { width:100%; justify-content:center; padding:12px; font-size:15px; }
.ppf-btn-large { padding:13px 28px; font-size:15px; }
.ppf-btn-sm    { padding:5px 10px; font-size:12px; }

/* ── Alerts ── */
.ppf-alert { padding:12px 16px; border-radius:8px; margin-bottom:18px; font-size:14px; font-weight:500; }
.ppf-alert-error   { background:#fee2e2; border:1px solid #fca5a5; color:#991b1b; }
.ppf-alert-success { background:#dcfce7; border:1px solid #86efac; color:#166534; }

/* ── Badges ── */
.ppf-badge { display:inline-block; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.ppf-badge-success { background:#dcfce7; color:#166534; }
.ppf-badge-warning { background:#fef9c3; color:#854d0e; }
.ppf-badge-info    { background:#dbeafe; color:#1e40af; }
.ppf-badge-danger  { background:#fee2e2; color:#991b1b; }
.ppf-badge-default { background:#f1f5f9; color:#475569; }

/* ═══════════════════════════════════════════════════════
   LOGIN PAGE
═══════════════════════════════════════════════════════ */
.ppf-login-wrap { min-height:80vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--ppf-primary) 0%,var(--ppf-login-end) 100%); padding:10px 0px; margin-top:-20px;}
.ppf-login-box { background:var(--ppf-white); border-radius:16px; box-shadow:var(--ppf-shadow); width:100%; max-width:420px; overflow:hidden; }
.ppf-login-header { background:linear-gradient(135deg,var(--ppf-primary),var(--ppf-accent)); color:#fff; padding:15px; text-align:center; }
.ppf-login-header h2 { margin:0 0 4px; font-size:22px; }
.ppf-login-header p  { margin:0; opacity:.85; font-size:14px; }
.ppf-login-icon { font-size:40px; margin-bottom:8px; }
.ppf-login-box .ppf-form { padding:15px; }

/* ═══════════════════════════════════════════════════════
   FORM ELEMENTS
═══════════════════════════════════════════════════════ */
.ppf-form .ppf-field { margin-bottom:16px; }
.ppf-form .ppf-field label { display:block; font-size:13px; font-weight:600; color:var(--ppf-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.4px; }
.ppf-form input[type=text],
.ppf-form input[type=email],
.ppf-form input[type=tel],
.ppf-form input[type=password],
.ppf-form input[type=number],
.ppf-form select,
.ppf-form textarea { width:100%; padding:10px 14px; border:2px solid var(--ppf-border); border-radius:8px; font-size:14px; font-family:inherit; color:var(--ppf-text); transition:border-color .18s, box-shadow .18s; background:#fff; }
.ppf-form input:focus,
.ppf-form select:focus,
.ppf-form textarea:focus { outline:none; border-color:var(--ppf-accent); box-shadow:0 0 0 3px rgba(233,69,96,.12); }
.ppf-req { color:var(--ppf-accent); }
.ppf-select-sm { padding:5px 8px; font-size:12px; border:1px solid var(--ppf-border); border-radius:6px; }

/* ═══════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════ */
.ppf-dashboard { max-width:1200px; margin:0 auto; padding:20px; }
.ppf-dash-header { background:linear-gradient(135deg,var(--ppf-primary) 0%,var(--ppf-login-end) 100%); color:#fff; border-radius:var(--ppf-radius); padding:24px 28px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.ppf-dash-header h2 { margin:0 0 4px; font-size:22px; }
.ppf-dash-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Stats grid */
.ppf-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px; margin-bottom:28px; }
.ppf-stat-box { background:#fff; border-radius:var(--ppf-radius); padding:20px; text-align:center; box-shadow:var(--ppf-shadow); border-top:4px solid var(--ppf-primary); display:flex; flex-direction:column; gap:6px; }
.ppf-stat-box.ppf-stat-warn    { border-top-color:#f59e0b; }
.ppf-stat-box.ppf-stat-info    { border-top-color:#3b82f6; }
.ppf-stat-box.ppf-stat-success { border-top-color:#10b981; }
.ppf-stat-box.ppf-stat-revenue { border-top-color:var(--ppf-accent); }
.ppf-stat-big { font-size:28px; font-weight:800; color:var(--ppf-primary); }
.ppf-stat-lbl { font-size:12px; color:var(--ppf-muted); font-weight:600; text-transform:uppercase; }

/* Sections */
.ppf-section { background:#fff; border-radius:var(--ppf-radius); box-shadow:var(--ppf-shadow); overflow:hidden; margin-bottom:24px; }
.ppf-section-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--ppf-border); }
.ppf-section-header h3 { margin:0; font-size:16px; }
.ppf-link { color:var(--ppf-accent); text-decoration:none; font-size:13px; font-weight:600; }

/* ═══════════════════════════════════════════════════════
   TABLE
═══════════════════════════════════════════════════════ */
.ppf-table-wrap { overflow-x:auto; }
.ppf-table { width:100%; border-collapse:collapse; font-size:13px; }
.ppf-table thead { background:var(--ppf-primary); color:#fff; }
.ppf-table th { padding:11px 14px; text-align:left; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.ppf-table td { padding:11px 14px; border-bottom:1px solid var(--ppf-border); vertical-align:middle; }
.ppf-table tbody tr:hover { background:#f8fafc; }
.ppf-table tbody tr:last-child td { border-bottom:none; }

/* ═══════════════════════════════════════════════════════
   JOB FORM
═══════════════════════════════════════════════════════ */
.ppf-form-page { max-width:900px; margin:0 auto; padding:20px; }
.ppf-page-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.ppf-page-header h2 { margin:0; flex:1; }
.ppf-back-link { color:var(--ppf-muted); text-decoration:none; font-size:13px; font-weight:600; }
.ppf-back-link:hover { color:var(--ppf-accent); }
.ppf-job-form { background:#fff; border-radius:var(--ppf-radius); box-shadow:var(--ppf-shadow); overflow:hidden; }
.ppf-form-section { padding:24px 28px; border-bottom:1px solid var(--ppf-border); }
.ppf-form-section:last-of-type { border-bottom:none; }
.ppf-form-section-title { margin:0 0 20px; font-size:16px; color:var(--ppf-primary); padding-bottom:10px; border-bottom:2px solid var(--ppf-border); }
.ppf-form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.ppf-field-full { grid-column:1/-1; }
.ppf-form-actions { padding:20px 28px; background:#f8fafc; display:flex; gap:12px; align-items:center; }
.ppf-success-card { background:#fff; border-radius:var(--ppf-radius); box-shadow:var(--ppf-shadow); padding:48px 28px; text-align:center; }
.ppf-success-icon { font-size:56px; margin-bottom:12px; }
.ppf-success-card h3 { margin:0 0 8px; font-size:22px; color:var(--ppf-primary); }

/* ═══════════════════════════════════════════════════════
   JOBS PAGE
═══════════════════════════════════════════════════════ */
.ppf-jobs-page { max-width:1200px; margin:0 auto; padding:20px; }
.ppf-filter-form { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; background:#fff; padding:16px; border-radius:var(--ppf-radius); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.ppf-filter-form input[type=text],
.ppf-filter-form select { padding:8px 12px; border:2px solid var(--ppf-border); border-radius:8px; font-size:13px; min-width:180px; }
.ppf-jobs-count { font-size:13px; color:var(--ppf-muted); margin-bottom:10px; font-weight:600; }
.ppf-inline-form { display:flex; flex-direction:column; gap:6px; }
.ppf-notes-preview { color:var(--ppf-muted); font-size:11px; display:block; margin-top:4px; cursor:help; }
.ppf-empty { background:#fff; border-radius:var(--ppf-radius); padding:48px; text-align:center; color:var(--ppf-muted); box-shadow:var(--ppf-shadow); }

/* ═══════════════════════════════════════════════════════
   ADMIN STYLES
═══════════════════════════════════════════════════════ */
.ppf-admin-wrap { max-width:1100px; }
.ppf-admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
.ppf-admin-card { background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:24px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.ppf-admin-card h2 { margin-top:0; font-size:16px; border-bottom:2px solid #e2e8f0; padding-bottom:10px; }
.ppf-info-card { background:#f0f9ff; border-color:#bae6fd; }
.ppf-info-card ol { padding-left:20px; }
.ppf-info-card li { margin-bottom:8px; font-size:14px; }
.ppf-stats-row { display:flex; gap:16px; flex-wrap:wrap; margin:16px 0; }
.ppf-stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:16px 24px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.06); display:flex; flex-direction:column; gap:4px; }
.ppf-stat-card.ppf-stat-warn    { border-top:4px solid #f59e0b; }
.ppf-stat-card.ppf-stat-success { border-top:4px solid #10b981; }
.ppf-stat-card.ppf-stat-info    { border-top:4px solid #3b82f6; }
.ppf-stat-num   { font-size:26px; font-weight:800; color:#1e293b; }
.ppf-stat-label { font-size:12px; color:#64748b; font-weight:600; text-transform:uppercase; }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ppf-admin-grid      { grid-template-columns:1fr; }
  .ppf-dash-header     { flex-direction:column; text-align:center; }
  .ppf-dash-actions    { justify-content:center; }
  .ppf-form-grid       { grid-template-columns:1fr; }
  .ppf-stats-grid      { grid-template-columns:1fr 1fr; }
  .ppf-filter-form     { flex-direction:column; }
  .ppf-filter-form input,
  .ppf-filter-form select { width:100%; }
  .ppf-table th, .ppf-table td { padding:8px 10px; font-size:12px; }
}

/* ─── Extended Customization Support ───────────────────────────────────── */
.ppf-portal { background:var(--ppf-bg); }
.ppf-login-wrap { background:linear-gradient(135deg,var(--ppf-primary) 0%,var(--ppf-login-end) 100%); }
.ppf-dash-header { background:linear-gradient(135deg,var(--ppf-primary) 0%,var(--ppf-login-end) 100%); }
.ppf-btn-primary, .ppf-btn-accent, .ppf-btn-danger { color:var(--ppf-button-text) !important; }
.ppf-btn-danger { background:var(--ppf-danger); }
.ppf-form .ppf-field[style*="--ppf-field-color"] input,
.ppf-form .ppf-field[style*="--ppf-field-color"] select,
.ppf-form .ppf-field[style*="--ppf-field-color"] textarea { border-color:var(--ppf-field-color); }
.ppf-form .ppf-field[style*="--ppf-field-color"] label { color:var(--ppf-field-color); }
.ppf-customizer-table input[type=text],
.ppf-customizer-table input[type=number],
.ppf-customizer-table select { max-width:180px; width:100%; }
.ppf-customizer-table textarea { font-family:monospace; }
.ppf-form-section-title { color:var(--ppf-primary); }
.ppf-badge-success { background:color-mix(in srgb, var(--ppf-success) 18%, white); color:#14532d; }
.ppf-badge-warning { background:color-mix(in srgb, var(--ppf-warning) 18%, white); color:#713f12; }
.ppf-badge-info { background:color-mix(in srgb, var(--ppf-info) 18%, white); color:#1e3a8a; }
.ppf-badge-danger { background:color-mix(in srgb, var(--ppf-danger) 18%, white); color:#7f1d1d; }

/* ─── Per-button and per-field customization ─────────────────────────── */
.ppf-btn-primary { background:var(--ppf-primary-btn-bg) !important; color:var(--ppf-primary-btn-text) !important; border-color:var(--ppf-primary-btn-border) !important; }
.ppf-btn-outline { background:var(--ppf-outline-btn-bg) !important; color:var(--ppf-outline-btn-text) !important; border-color:var(--ppf-outline-btn-border) !important; }
.ppf-btn-new-job { background:var(--ppf-new-job-btn-bg) !important; color:var(--ppf-new-job-btn-text) !important; border:2px solid var(--ppf-new-job-btn-border) !important; }
.ppf-btn-view-jobs { background:var(--ppf-view-jobs-btn-bg) !important; color:var(--ppf-view-jobs-btn-text) !important; border:2px solid var(--ppf-view-jobs-btn-border) !important; }
.ppf-btn-change-password { background:var(--ppf-change-password-btn-bg) !important; color:var(--ppf-change-password-btn-text) !important; border:2px solid var(--ppf-change-password-btn-border) !important; }
.ppf-btn-logout { background:var(--ppf-logout-btn-bg) !important; color:var(--ppf-logout-btn-text) !important; border:2px solid var(--ppf-logout-btn-border) !important; }
.ppf-btn-new-job:hover,
.ppf-btn-view-jobs:hover,
.ppf-btn-change-password:hover,
.ppf-btn-logout:hover { filter:brightness(.94); }
.ppf-form .ppf-field[style*="--ppf-field-label-color"] label { color:var(--ppf-field-label-color) !important; }
.ppf-form .ppf-field[style*="--ppf-field-border-color"] input,
.ppf-form .ppf-field[style*="--ppf-field-border-color"] select,
.ppf-form .ppf-field[style*="--ppf-field-border-color"] textarea { border-color:var(--ppf-field-border-color) !important; }
.ppf-form .ppf-field[style*="--ppf-field-bg-color"] input,
.ppf-form .ppf-field[style*="--ppf-field-bg-color"] select,
.ppf-form .ppf-field[style*="--ppf-field-bg-color"] textarea { background:var(--ppf-field-bg-color) !important; }
.ppf-form .ppf-field[style*="--ppf-field-text-color"] input,
.ppf-form .ppf-field[style*="--ppf-field-text-color"] select,
.ppf-form .ppf-field[style*="--ppf-field-text-color"] textarea { color:var(--ppf-field-text-color) !important; }
.ppf-admin-button-color-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.ppf-color-item-card,
.ppf-field-settings-card { border:1px solid #e2e8f0; border-radius:10px; padding:14px; background:#f8fafc; }
.ppf-color-item-card h3 { margin:0 0 10px; font-size:14px; }
.ppf-color-item-card label { display:block; margin-bottom:8px; font-weight:600; }
.ppf-color-item-card input { width:100%; }
.ppf-field-settings-list { display:flex; flex-direction:column; gap:14px; }
.ppf-field-settings-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #e2e8f0; }
.ppf-field-settings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; align-items:end; }
.ppf-field-settings-grid label { font-weight:600; }
.ppf-field-settings-grid input[type=text],
.ppf-field-settings-grid input[type=number],
.ppf-field-settings-grid select { width:100%; }