/* ═══════════════════════════════════════════════════════════════
   TradeForge Supply Purchasing — Stylesheet
   Contractor purchasing hub UI for material orders, quotes,
   supplier connections, delivery tracking, and project purchases
   ═══════════════════════════════════════════════════════════════ */

/* ── Tab Navigation ── */
.scp-tabs{display:flex;gap:4px;padding:18px 0 0;border-bottom:1px solid rgba(181,183,185,.08);flex-wrap:wrap}
.scp-tab{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;letter-spacing:.01em}
.scp-tab:hover{color:#fff}
.scp-tab.active{color:#fff;border-bottom-color:var(--bronze)}

/* ── Panel Container ── */
.scp-panel{padding:24px 0 40px}
.scp-panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.scp-panel-header h2{margin:0 0 4px;font-size:22px;color:#fff}

/* ── Form Wrapper ── */
.scp-form-wrap{margin-top:18px}

/* ── Item Row (multi-input inline) ── */
.scp-item-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.scp-item-row input,.scp-item-row select{flex:1;min-width:0}
.scp-item-row input:first-child{flex:3}
.scp-item-row select:first-of-type{flex:1.5}
.scp-item-remove{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 8px;flex-shrink:0}
.scp-item-remove:hover{color:#ef4444}

/* ── Order / Quote / Supplier List Cards ── */
.scp-list{display:flex;flex-direction:column;gap:12px}

.scp-order-card{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:var(--r);padding:18px;transition:border-color .15s}
.scp-order-card:hover{border-color:rgba(140,106,62,.45)}

.scp-order-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.scp-order-number{font-size:14px;font-weight:700;color:#fff;letter-spacing:.02em}
.scp-order-type{display:inline-flex;font-size:11px;padding:3px 10px;border-radius:999px;background:rgba(140,106,62,.10);border:1px solid rgba(140,106,62,.20);color:var(--bronze);font-weight:600;letter-spacing:.03em}

.scp-order-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--muted);margin-bottom:10px}
.scp-order-meta strong{color:var(--ash)}
.scp-order-meta-item{display:flex;gap:4px;align-items:center}

.scp-order-items{margin-top:10px;padding-top:10px;border-top:1px solid rgba(181,183,185,.06)}
.scp-order-items table{width:100%;border-collapse:collapse;font-size:12px;color:var(--muted)}
.scp-order-items th{text-align:left;padding:6px 8px;color:var(--ash);font-weight:600;border-bottom:1px solid rgba(181,183,185,.08)}
.scp-order-items td{padding:6px 8px;border-bottom:1px solid rgba(181,183,185,.04)}

.scp-order-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid rgba(181,183,185,.06);gap:10px;flex-wrap:wrap}
.scp-order-total{font-size:14px;font-weight:700;color:var(--bronze)}

.scp-order-actions{display:flex;gap:8px;flex-wrap:wrap}
.scp-order-actions .btn{font-size:11px;padding:6px 12px}

/* ── Status Badge (reuse supply-co pattern + purchasing statuses) ── */
.scp-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:650;padding:4px 10px;border-radius:999px;letter-spacing:.03em;text-transform:uppercase}
.scp-status::before{content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0}
.scp-status-draft{color:#6b7280;border:1px solid rgba(107,114,128,.30)}.scp-status-draft::before{background:#6b7280}
.scp-status-submitted{color:#3b82f6;border:1px solid rgba(59,130,246,.30)}.scp-status-submitted::before{background:#3b82f6}
.scp-status-quote-requested{color:#f59e0b;border:1px solid rgba(245,158,11,.30)}.scp-status-quote-requested::before{background:#f59e0b}
.scp-status-quoted{color:#8b5cf6;border:1px solid rgba(139,92,246,.30)}.scp-status-quoted::before{background:#8b5cf6}
.scp-status-approved{color:#10b981;border:1px solid rgba(16,185,129,.30)}.scp-status-approved::before{background:#10b981}
.scp-status-ordered{color:#3b82f6;border:1px solid rgba(59,130,246,.30)}.scp-status-ordered::before{background:#3b82f6}
.scp-status-shipped{color:#f59e0b;border:1px solid rgba(245,158,11,.30)}.scp-status-shipped::before{background:#f59e0b}
.scp-status-in-transit{color:#f97316;border:1px solid rgba(249,115,22,.30)}.scp-status-in-transit::before{background:#f97316}
.scp-status-delivered{color:#6abf69;border:1px solid rgba(106,191,105,.30)}.scp-status-delivered::before{background:#6abf69}
.scp-status-received{color:#10b981;border:1px solid rgba(16,185,129,.30)}.scp-status-received::before{background:#10b981}
.scp-status-completed{color:#6abf69;border:1px solid rgba(106,191,105,.30)}.scp-status-completed::before{background:#6abf69}
.scp-status-cancelled{color:#ef4444;border:1px solid rgba(239,68,68,.30)}.scp-status-cancelled::before{background:#ef4444}

/* ── Delivery Tracking Timeline ── */
.scp-tracking{margin-top:10px;padding:12px;background:rgba(181,183,185,.03);border:1px solid rgba(181,183,185,.06);border-radius:10px}
.scp-tracking-title{font-size:12px;font-weight:700;color:var(--ash);margin-bottom:8px}
.scp-tracking-event{display:flex;gap:10px;padding:6px 0;border-bottom:1px solid rgba(181,183,185,.04);font-size:12px}
.scp-tracking-event:last-child{border-bottom:0}
.scp-tracking-dot{width:8px;height:8px;border-radius:50%;background:var(--bronze);flex-shrink:0;margin-top:4px}
.scp-tracking-detail{flex:1}
.scp-tracking-status{color:#fff;font-weight:600}
.scp-tracking-time{color:var(--muted);font-size:11px;margin-top:2px}
.scp-tracking-notes{color:var(--muted);margin-top:2px}

/* ── Project Purchase Group ── */
.scp-project-group{margin-bottom:20px}
.scp-project-group-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(140,106,62,.06);border:1px solid rgba(140,106,62,.18);border-radius:var(--r) var(--r) 0 0;cursor:pointer}
.scp-project-group-header h3{margin:0;font-size:15px;color:#fff}
.scp-project-group-header .scp-project-stats{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.scp-project-group-body{border:1px solid rgba(181,183,185,.08);border-top:0;border-radius:0 0 var(--r) var(--r);padding:12px}

/* ── Supplier Connection Card ── */
.scp-supplier-card{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:var(--r);padding:18px;display:flex;align-items:center;gap:16px;transition:border-color .15s}
.scp-supplier-card:hover{border-color:rgba(140,106,62,.45)}
.scp-supplier-icon{width:44px;height:44px;border-radius:10px;background:rgba(140,106,62,.10);border:1px solid rgba(140,106,62,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scp-supplier-icon svg{width:22px;height:22px;color:var(--bronze)}
.scp-supplier-info{flex:1}
.scp-supplier-name{font-size:15px;font-weight:700;color:#fff;margin-bottom:2px}
.scp-supplier-detail{font-size:12px;color:var(--muted)}
.scp-supplier-categories{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.scp-supplier-categories .sc-tag{font-size:10px;padding:2px 6px}

/* ── Filter Bar ── */
.scp-filter-bar{display:flex;flex-wrap:wrap;gap:10px;padding:14px 0;align-items:center}
.scp-filter-bar select,.scp-filter-bar input[type="text"]{background:rgba(181,183,185,.06);border:1px solid rgba(181,183,185,.14);color:var(--text);padding:9px 12px;border-radius:10px;font-size:13px;outline:none;min-width:140px}
.scp-filter-bar input[type="text"]{min-width:200px}
.scp-filter-bar select:focus,.scp-filter-bar input[type="text"]:focus{border-color:rgba(140,106,62,.50)}
.scp-filter-count{font-size:12px;color:var(--muted);margin-left:auto}

/* ── Empty State ── */
.scp-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.scp-empty h3{color:var(--ash);margin-bottom:6px;font-size:16px}
.scp-empty p{font-size:13px;max-width:40ch;margin:0 auto}

/* ── Success Message ── */
.scp-success{padding:16px;background:rgba(106,191,105,.08);border:1px solid rgba(106,191,105,.25);border-radius:10px;color:#6abf69;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:16px}

/* ── Responsive ── */
@media (max-width:900px){
  .scp-tabs{gap:2px}
  .scp-tab{padding:8px 10px;font-size:12px}
  .scp-item-row{flex-direction:column}
  .scp-item-row input,.scp-item-row select{width:100%;max-width:none!important}
  .scp-order-header{flex-direction:column;align-items:flex-start}
  .scp-supplier-card{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .scp-tabs{flex-direction:column;gap:0}
  .scp-tab{text-align:left;border-bottom:none;border-left:2px solid transparent;padding:10px 14px}
  .scp-tab.active{border-left-color:var(--bronze);border-bottom:none}
  .scp-panel-header{flex-direction:column}
  .scp-filter-bar{flex-direction:column}
  .scp-filter-bar select,.scp-filter-bar input[type="text"]{width:100%}
}

/* ── Mobile Field Optimization ── */
@media(max-width:900px){
  /* Touch targets — tabs, buttons & interactive elements */
  .scp-tab{min-height:44px;padding:12px 16px;font-size:14px}
  .scp-order-actions .btn{min-height:44px;padding:10px 16px;font-size:13px}
  .scp-item-remove{min-height:44px;padding:10px 12px;font-size:18px}
  .scp-order-card{padding:18px}
  .scp-supplier-card{padding:18px;min-height:48px}
  .scp-project-group-header{min-height:48px;padding:14px 16px}
  .scp-tracking-event{min-height:44px;padding:10px 0}
  /* Form inputs — prevent iOS zoom */
  .scp-item-row input,.scp-item-row select,.scp-filter-bar select,.scp-filter-bar input[type="text"]{font-size:16px;min-height:48px}
  /* Cards — readable spacing */
  .scp-order-meta{font-size:13px}
  .scp-supplier-name{font-size:16px}
  .scp-supplier-detail{font-size:13px}
  /* Tracking — readable */
  .scp-tracking-status{font-size:14px}
  .scp-tracking-detail{font-size:13px}
}
@media(max-width:520px){
  /* Full-width buttons */
  .scp-order-actions{flex-direction:column;width:100%}
  .scp-order-actions .btn{width:100%;text-align:center;justify-content:center}
  /* Outdoor-readable text */
  .scp-panel-header h2{font-size:20px}
  .scp-order-number{font-size:16px}
  .scp-order-total{font-size:16px}
}