/* ============================================================
   RLN JobNexus 360 – Admin Styles
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.spjc-wrap { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #1a1a2e; padding: 10px 0; }

/* ── Top bar ── */
.spjc-topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.spjc-title  { font-size:22px; font-weight:700; color:#1a237e; margin:0; }
.spjc-topbar-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ── Buttons ── */
.spjc-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; border:none; transition:all .2s; }
.spjc-btn-primary  { background:#1a237e; color:#fff; }
.spjc-btn-primary:hover  { background:#283593; color:#fff; }
.spjc-btn-secondary { background:#e8eaf6; color:#1a237e; }
.spjc-btn-secondary:hover { background:#c5cae9; color:#1a237e; }
.spjc-btn-excel  { background:#1b5e20; color:#fff; }
.spjc-btn-excel:hover { background:#2e7d32; color:#fff; }
.spjc-btn-reset  { background:#cfd8dc; color:#37474f; }
.spjc-btn-reset:hover { background:#b0bec5; color:#37474f; }

.spjc-btn-xs    { display:inline-block; padding:3px 9px; border-radius:5px; font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; border:none; cursor:pointer; font-family:inherit; line-height:1.4; }
.spjc-btn-view  { background:#e8f5e9; color:#2e7d32; }
.spjc-btn-view:hover  { background:#c8e6c9; color:#1b5e20; }
.spjc-btn-edit  { background:#e3f2fd; color:#0d47a1; }
.spjc-btn-edit:hover  { background:#bbdefb; color:#0d47a1; }
.spjc-btn-print { background:#f3e5f5; color:#6a1b9a; }
.spjc-btn-print:hover { background:#e1bee7; color:#6a1b9a; }
.spjc-btn-delete { background:#ffebee; color:#c62828; }
.spjc-btn-delete:hover { background:#ffcdd2; color:#c62828; }

/* ── Notice ── */
.spjc-notice { background:#e8f5e9; border-left:4px solid #43a047; color:#1b5e20; padding:10px 16px; border-radius:6px; margin-bottom:18px; font-weight:600; }
.spjc-notice-info { background:#e3f2fd; border-left-color:#1a237e; color:#0d47a1; }
.spjc-notice-warn { background:#fff8e1; border-left-color:#f9a825; color:#f57f17; }
.spjc-user-badge { font-size:12px; font-weight:600; color:#455a64; background:#eceff1; padding:6px 12px; border-radius:8px; }

/* ── User password show/hide ── */
.spjc-pwd-field { display:flex; align-items:stretch; gap:0; }
.spjc-pwd-field input { flex:1; border-radius:8px 0 0 8px !important; }
.spjc-pwd-eye {
    padding:0 14px; border:1.5px solid #c5cae9; border-left:none; border-radius:0 8px 8px 0;
    background:#e8eaf6; cursor:pointer; font-size:16px; line-height:1;
}
.spjc-pwd-eye:hover { background:#c5cae9; }
.spjc-pwd-cell {
    display:inline-flex; align-items:center; padding:4px 10px; border:none; border-radius:6px;
    background:#f5f5f5; font-family:monospace; font-size:13px; color:#37474f; cursor:pointer;
    letter-spacing:.05em; min-width:90px; text-align:left;
}
.spjc-pwd-cell:hover { background:#e8eaf6; color:#1a237e; }
.spjc-pwd-cell.is-visible { background:#e8f5e9; color:#1b5e20; letter-spacing:normal; }
.spjc-pwd-cell.is-empty.is-visible { background:#fff3e0; color:#e65100; font-family:inherit; font-size:12px; }

/* ── Login ── */
.spjc-login-wrap { display:flex; justify-content:center; align-items:center; min-height:60vh; }
.spjc-login-card { max-width:380px; width:100%; }

.spjc-login-wrap {
    min-height: 72vh;
    padding: 28px 16px;
    background:
        radial-gradient(circle at 18% 12%, rgba(37, 99, 235, 0.10), transparent 28%),
        radial-gradient(circle at 82% 86%, rgba(14, 165, 233, 0.08), transparent 26%),
        #f5f7fb;
    border-radius: 16px;
}

.spjc-login-card {
    max-width: 430px;
    padding: 34px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.10), 0 1px 2px rgba(15, 23, 42, 0.05);
}

.spjc-login-card h3 {
    color: #111827;
    font-size: 22px;
    text-align: center;
}

.spjc-login-card input[type="text"],
.spjc-login-card input[type="password"] {
    height: 46px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #f8fafc;
}

/* ── Cards ── */
.spjc-card { background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 12px rgba(26,35,126,.08); margin-bottom:20px; }
.spjc-card h3 { margin:0 0 16px; color:#1a237e; font-size:16px; }

/* ── Stats Grid ── */
.spjc-stats-hint { margin:0 0 10px; font-size:12px; color:#78909c; }
.spjc-stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:14px; margin-bottom:20px; }
.spjc-joblist-row { cursor:pointer; }
.spjc-joblist-row:hover { background:#f0f4ff !important; }
.spjc-stat-card  {
    background:#fff; border-radius:10px; padding:18px 20px; box-shadow:0 2px 10px rgba(0,0,0,.07);
    display:flex; flex-direction:column; gap:4px; width:100%; text-align:left;
    border:1px solid transparent; border-left-width:5px; cursor:pointer; font-family:inherit;
    transition:transform .2s, box-shadow .2s, border-color .2s;
}
.spjc-stat-trigger:hover {
    transform:translateY(-3px);
    box-shadow:0 8px 20px rgba(26,35,126,.12);
    border-color:#c5cae9;
}
.spjc-stat-trigger:focus { outline:2px solid #1a237e; outline-offset:2px; }
.spjc-stat-icon  { font-size:22px; }
.spjc-stat-value { font-size:32px; font-weight:700; color:#1a237e; line-height:1; }
.spjc-stat-label { font-size:12px; color:#607d8b; font-weight:500; }

/* ── Staff workload banner ── */
.spjc-staff-workload { margin-bottom:20px; border:1px solid #c5cae9; background:linear-gradient(135deg,#f8f9ff 0%,#fff 100%); }
.spjc-staff-workload-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; flex-wrap:wrap; gap:8px; }
.spjc-staff-workload-head h3 { margin:0; }
.spjc-staff-workload-sub { font-size:12px; color:#607d8b; font-weight:600; background:#e8eaf6; padding:6px 12px; border-radius:20px; }
.spjc-staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.spjc-staff-tile { background:#fff; border:1px solid #e8eaf6; border-radius:12px; padding:14px 16px; box-shadow:0 2px 8px rgba(26,35,126,.06); }
.spjc-staff-tile-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; }
.spjc-staff-tile-top strong { color:#1a237e; }
.spjc-staff-tile small { font-size:11px; color:#78909c; }

.spjc-recent-jobs-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.spjc-recent-jobs-head h3 { margin:0; }
.spjc-recent-jobs-head small { color:#78909c; font-size:12px; }

.spjc-table-hint { margin:0 0 12px; font-size:12px; color:#78909c; }

/* ── Staff progress ── */
.spjc-staff-row     { display:flex; justify-content:space-between; margin-bottom:4px; font-size:13px; }
.spjc-progress      { background:#e0e0e0; border-radius:10px; height:8px; margin-bottom:8px; }
.spjc-progress-bar  { background:linear-gradient(90deg,#1a237e,#42a5f5); height:8px; border-radius:10px; min-width:6px; transition:width .4s; }

/* ── Sortable table headers ── */
.spjc-table th.spjc-sortable a {
    color:#1a237e; text-decoration:none; display:inline-flex; align-items:center; gap:4px;
}
.spjc-table th.spjc-sortable a:hover { color:#283593; text-decoration:underline; }
.spjc-table th.spjc-sortable.is-sorted { background:#c5cae9; }

/* ── Tables ── */
.spjc-table { width:100%; border-collapse:collapse; font-size:13px; }
.spjc-table th { background:#e8eaf6; color:#1a237e; padding:10px 12px; text-align:left; font-weight:600; white-space:nowrap; }
.spjc-table td { padding:10px 12px; border-bottom:1px solid #f0f0f0; vertical-align:middle; }
.spjc-table tbody tr:hover { background:#f9f9ff; }
.spjc-table-full { width:100%; }
.spjc-overdue { background:#fff3e0 !important; }
.spjc-action-btns { white-space:nowrap; }
td.spjc-action-btns,
td.spjc-col-actions,
th.spjc-col-actions { display:table-cell; vertical-align:middle; }
td.spjc-action-btns .spjc-btn-xs,
td.spjc-col-actions .spjc-btn-xs { display:inline-block; margin:0 4px 0 0; vertical-align:middle; }
td.spjc-action-btns .spjc-btn-xs:last-child,
td.spjc-col-actions .spjc-btn-xs:last-child { margin-right:0; }
.spjc-table-wrap { overflow-x:auto; max-width:100%; }
.spjc-table .spjc-col-actions { position:sticky; right:0; z-index:2; min-width:210px; background:#fff; box-shadow:-8px 0 12px rgba(15,23,42,.08); }
.spjc-table thead .spjc-col-actions { z-index:3; background:#e8eaf6; }
.spjc-table tbody tr:hover .spjc-col-actions { background:#f9f9ff; }

/* ── Filter bar ── */
.spjc-filter-bar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.spjc-filter-bar input[type="text"],
.spjc-filter-bar select { padding:8px 12px; border:1px solid #c5cae9; border-radius:8px; font-size:13px; min-width:200px; }

/* ── Form card ── */
.spjc-form-card { max-width:100%; }
.spjc-section-title { background:#e3f2fd; color:#0d47a1; padding:10px 16px; border-radius:8px; margin:24px 0 14px; font-weight:700; font-size:13px; }
.spjc-form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; }
.spjc-form-group { display:flex; flex-direction:column; gap:5px; }
.spjc-full-width { grid-column: 1 / -1; }
.spjc-form-group label { font-size:12px; font-weight:600; color:#455a64; }
.spjc-form-group input,
.spjc-form-group select,
.spjc-form-group textarea {
    padding:10px 12px; border:1.5px solid #c5cae9; border-radius:8px;
    font-size:13px; font-family:inherit; transition:border-color .2s;
    background:#fafafa;
}
.spjc-form-group input:focus,
.spjc-form-group select:focus,
.spjc-form-group textarea:focus { border-color:#1a237e; outline:none; background:#fff; }
.spjc-form-actions { display:flex; gap:14px; margin-top:28px; padding-top:20px; border-top:2px solid #f0f0f0; }
.spjc-form-actions .spjc-btn { flex:1; justify-content:center; padding:12px; font-size:14px; }

/* ── View job (read-only) ── */
.spjc-view-card .spjc-section-title { margin-top:0; }
.spjc-view-card .spjc-section-title:not(:first-child) { margin-top:20px; }
.spjc-view-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px 20px; margin-bottom:8px; }
.spjc-view-item { display:flex; flex-direction:column; gap:4px; padding:10px 12px; background:#fafafa; border:1px solid #eceff1; border-radius:8px; }
.spjc-view-item span { font-size:11px; font-weight:600; color:#607d8b; text-transform:uppercase; letter-spacing:.03em; }
.spjc-view-item strong { font-size:14px; color:#1a1a2e; font-weight:600; line-height:1.4; word-break:break-word; }
.spjc-view-full { grid-column:1 / -1; }

/* ── Job view modal ── */
body.spjc-modal-open { overflow:hidden; }
.spjc-modal-stat { z-index:100000; }
#spjc-job-modal { z-index:100010; }
.spjc-modal-dialog-wide { max-width:960px; }
.spjc-stat-modal-count {
    display:inline-block; margin-top:8px; font-size:12px; font-weight:600;
    color:#6b7280; background:#f3f4f6; padding:4px 10px; border-radius:20px;
}
.spjc-stat-list-wrap { overflow-x:auto; }
.spjc-stat-list-table { margin:0; }
.spjc-stat-job-row { cursor:pointer; transition:background .15s; }
.spjc-stat-job-row:hover { background:#eef2ff !important; }
.spjc-stat-list-hint { margin:12px 0 0; font-size:12px; color:#78909c; text-align:center; }
.spjc-stat-list-empty { text-align:center; color:#78909c; padding:32px 16px; }

.spjc-modal {
    position:fixed; inset:0; z-index:100000;
    display:flex; align-items:center; justify-content:center;
    padding:20px; pointer-events:none; opacity:0;
    transition:opacity .25s ease;
}
.spjc-modal.is-open { pointer-events:auto; opacity:1; }
.spjc-modal-backdrop {
    position:absolute; inset:0;
    background:rgba(15,23,42,.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.spjc-modal-dialog {
    position:relative; width:100%; max-width:760px; max-height:92vh;
    transform:translateY(16px) scale(.98);
    transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.spjc-modal.is-open .spjc-modal-dialog { transform:translateY(0) scale(1); }
.spjc-modal-panel {
    background:#fff; border-radius:20px; overflow:hidden;
    box-shadow:0 24px 80px rgba(26,35,126,.22), 0 8px 24px rgba(0,0,0,.08);
    display:flex; flex-direction:column; max-height:92vh;
}
.spjc-modal-header {
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:18px 20px;
    background:#fff;
    color:#111827;
    border-bottom:1px solid #e5e7eb;
}
.spjc-modal-eyebrow {
    display:block; font-size:11px; font-weight:600; letter-spacing:.06em;
    text-transform:uppercase; color:#6b7280; margin-bottom:4px;
}
.spjc-modal-header h2 {
    margin:0; font-size:18px; font-weight:700; line-height:1.25; color:#111827;
}
.spjc-modal-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.spjc-modal-badges span { font-size:11px !important; }
.spjc-modal-chip {
    display:inline-flex; align-items:center; padding:4px 10px; border-radius:20px;
    font-size:11px; font-weight:700; color:#fff; background:#546e7a;
}
.spjc-modal-chip-warn { background:#e65100; }
.spjc-modal-close {
    flex-shrink:0; width:32px; height:32px; border:1px solid #d1d5db; border-radius:8px;
    background:#fff; color:#374151; font-size:0; line-height:1;
    cursor:pointer; transition:background .15s, border-color .15s, color .15s;
    display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.spjc-modal-close:hover { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.spjc-modal-close svg { display:block; }
.spjc-modal-body {
    padding:20px; overflow-y:auto; background:#fafbfc;
    flex:1;
}
.spjc-modal-footer {
    display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap;
    padding:14px 20px; border-top:1px solid #e5e7eb; background:#fff;
}
.spjc-modal-loading, .spjc-modal-error {
    text-align:center; padding:48px 20px; color:#607d8b;
}
.spjc-modal-spinner {
    width:32px; height:32px; margin:0 auto 14px;
    border:2px solid #e5e7eb; border-top-color:#2563eb;
    border-radius:50%; animation:spjc-spin .8s linear infinite;
}
@keyframes spjc-spin { to { transform:rotate(360deg); } }
.spjc-modal-error { color:#c62828; font-weight:600; }

.spjc-modal-hero {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr));
    gap:12px; margin-bottom:18px;
}
.spjc-modal-stat {
    display:flex; align-items:center; gap:12px;
    background:#fff; border:1px solid #e8eaf6; border-radius:14px;
    padding:14px 16px; box-shadow:0 2px 8px rgba(26,35,126,.04);
    transition:transform .2s, box-shadow .2s;
}
.spjc-modal-stat:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(26,35,126,.08); }
.spjc-modal-stat-icon { font-size:22px; line-height:1; }
.spjc-modal-stat small { display:block; font-size:10px; font-weight:600; color:#90a4ae; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.spjc-modal-stat strong { font-size:14px; color:#1a237e; font-weight:700; word-break:break-word; }
.spjc-modal-stat-warn { border-color:#ffcc80; background:#fff8f0; }
.spjc-modal-stat-warn strong { color:#e65100; }
.spjc-modal-stat-accent { background:linear-gradient(135deg,#e8eaf6,#f3e5f5); border-color:#c5cae9; }

.spjc-modal-sections { display:flex; flex-direction:column; gap:14px; }
.spjc-modal-section {
    background:#fff; border:1px solid #e8eaf6; border-radius:16px;
    overflow:hidden; box-shadow:0 2px 8px rgba(26,35,126,.04);
}
.spjc-modal-section-head {
    display:flex; align-items:center; gap:8px;
    padding:12px 16px; font-size:13px; font-weight:700; color:#1a237e;
    background:linear-gradient(90deg,#f5f7ff,#fff);
    border-bottom:1px solid #eef1f8;
}
.spjc-modal-section-head span { font-size:16px; }
.spjc-modal-fields {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:12px 16px; padding:16px;
}
.spjc-modal-field label {
    display:block; font-size:10px; font-weight:700; color:#90a4ae;
    text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px;
}
.spjc-modal-field p {
    margin:0; font-size:14px; font-weight:600; color:#263238; line-height:1.45; word-break:break-word;
}
.spjc-modal-field-wide { grid-column:1 / -1; }

.spjc-modal-section-internal { border-color:#ffe0b2; }
.spjc-modal-section-internal .spjc-modal-section-head { background:linear-gradient(90deg,#fff8e1,#fff); color:#e65100; }
.spjc-modal-remarks {
    padding:16px; font-size:14px; line-height:1.55; color:#455a64;
    background:#fffdf5; border-left:4px solid #ffb74d; margin:0 16px 16px;
    border-radius:0 10px 10px 0;
}

.spjc-modal-billing {
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px;
}
.spjc-modal-bill-item {
    text-align:center; padding:14px 10px; border-radius:12px;
    background:#f8fafc; border:1px solid #e8eaf6;
}
.spjc-modal-bill-item small { display:block; font-size:10px; font-weight:600; color:#90a4ae; text-transform:uppercase; margin-bottom:6px; }
.spjc-modal-bill-item strong { font-size:18px; color:#1a237e; font-weight:700; }
.spjc-modal-bill-balance { background:linear-gradient(135deg,#e8eaf6,#ede7f6); border-color:#c5cae9; }
.spjc-modal-bill-balance strong { color:#4a148c; }

@media (max-width:640px) {
    .spjc-modal { padding:10px; }
    .spjc-modal-header { padding:18px 16px 14px; }
    .spjc-modal-body { padding:14px 16px; }
    .spjc-modal-footer { padding:12px 16px; }
    .spjc-modal-billing { grid-template-columns:1fr; }
}

/* Job card model form */
.spjc-jcm-section { margin-top: 8px; }
.spjc-jcm-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.spjc-jcm-checkboxes { display: flex; flex-wrap: wrap; gap: 14px 20px; padding: 8px 0; }
.spjc-jcm-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.spjc-jcm-table .spjc-jcm-inline-input,
.spjc-jcm-table .spjc-jcm-inline-textarea,
.spjc-jcm-table select { width: 100%; border: 1px solid #c5cae9; border-radius: 6px; padding: 6px 8px; font-size: 12px; font-family: inherit; }
.spjc-jcm-table .spjc-jcm-inline-textarea { min-height: 44px; resize: vertical; }
.spjc-jcm-view-table { margin-top: 8px; font-size: 12px; }
.spjc-jcm-view-table th, .spjc-jcm-view-table td { padding: 6px 8px; }
@media (max-width: 900px) {
    .spjc-jcm-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .spjc-jcm-grid-3 { grid-template-columns: 1fr; }
}

/* Hidden CRM screens stay registered so wp-admin / owner can open them. */
#adminmenu a[href$="page=spjc-login"],
#adminmenu a[href$="page=spjc-view-job"],
#adminmenu a[href$="page=spjc-print"],
#adminmenu a[href$="page=spjc-edit-job"],
#adminmenu a[href$="page=spjc-edit-sale"],
#adminmenu a[href$="page=spjc-print-sale"],
#adminmenu a[href$="page=spjc-print-invoice"],
#adminmenu a[href$="page=spjc-print-po"],
#adminmenu a[href$="page=spjc-print-grn"] {
    display: none !important;
}

/* Popup bug fixes: horizontal scroll + clean close buttons */
.spjc-modal .spjc-stat-list-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}

.spjc-modal .spjc-stat-list-table,
.spjc-modal .spjc-stat-list-wrap table,
.spjc-modal .spjc-table {
    width: max-content !important;
    min-width: 920px !important;
}

.spjc-modal .spjc-modal-body {
    overflow: auto !important;
}

.spjc-modal .spjc-modal-panel {
    min-width: 0;
}

.spjc-modal .spjc-modal-close {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
}

.spjc-modal .spjc-modal-close::before {
    content: '×';
    font-size: 24px;
    line-height: 1;
    font-weight: 400;
}

.spjc-modal .spjc-modal-close svg {
    display: none !important;
}
.spjc-popup-top-scroll {
    width: 100%;
    max-width: 100%;
    height: 16px;
    margin: 0 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    -webkit-overflow-scrolling: touch;
}

.spjc-popup-top-scroll > div {
    height: 1px;
}

.spjc-popup-top-scroll::-webkit-scrollbar {
    height: 10px;
}

.spjc-popup-top-scroll::-webkit-scrollbar-track {
    background: #eef2f7;
    border-radius: 999px;
}

.spjc-popup-top-scroll::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 999px;
}

.spjc-popup-top-scroll::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}