/* ── TradeForge Issue Tracker — Mobile-First Field UI ── */

.it-page{max-width:640px;margin:0 auto;padding:12px 10px 90px;font-family:system-ui,-apple-system,sans-serif}

/* ── Header ─────────────────────────────────────── */
.it-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.it-header h1{font-size:17px;font-weight:700;color:var(--ash,#B5B7B9);margin:0;flex:1}
.it-back{width:36px;height:36px;border-radius:8px;background:var(--graphite,#2E3136);border:1px solid var(--line,rgba(140,106,62,.35));display:flex;align-items:center;justify-content:center;color:var(--ash);cursor:pointer;flex-shrink:0}
.it-back:hover{background:var(--bronze,#8C6A3E);color:#fff}
.it-back svg{width:18px;height:18px}

/* ── Stats Strip ────────────────────────────────── */
.it-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:16px}
.it-stat{background:var(--graphite,#2E3136);border-radius:10px;padding:10px 6px;text-align:center;border:1px solid var(--line,rgba(140,106,62,.25))}
.it-stat-value{display:block;font-size:20px;font-weight:800;color:var(--ash,#B5B7B9);line-height:1.2}
.it-stat-label{display:block;font-size:10px;color:var(--muted,rgba(181,183,185,.72));text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.it-stat.alert .it-stat-value{color:#ef4444}
.it-stat.warning .it-stat-value{color:#f59e0b}
.it-stat.success .it-stat-value{color:#22c55e}

/* ── Filters ────────────────────────────────────── */
.it-filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.it-filters::-webkit-scrollbar{display:none}
.it-filter{white-space:nowrap;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:600;background:var(--graphite,#2E3136);color:var(--muted);border:1px solid transparent;cursor:pointer;transition:all .15s}
.it-filter:hover{border-color:var(--line)}
.it-filter.active{background:var(--bronze,#8C6A3E);color:#fff;border-color:var(--bronze)}
.it-filter .it-filter-count{display:inline-block;margin-left:5px;background:rgba(255,255,255,.15);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:700}

/* ── Issue List ─────────────────────────────────── */
.it-list{display:flex;flex-direction:column;gap:8px}
.it-issue{background:var(--graphite,#2E3136);border-radius:12px;padding:14px;border:1px solid var(--line,rgba(140,106,62,.25));cursor:pointer;transition:border-color .15s,transform .1s}
.it-issue:hover{border-color:var(--bronze,#8C6A3E)}
.it-issue:active{transform:scale(.99)}
.it-issue-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px}
.it-issue-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
.it-issue-icon.safety{background:rgba(239,68,68,.15);color:#ef4444}
.it-issue-icon.material{background:rgba(59,130,246,.15);color:#3b82f6}
.it-issue-icon.delay{background:rgba(245,158,11,.15);color:#f59e0b}
.it-issue-icon.damage{background:rgba(168,85,247,.15);color:#a855f7}
.it-issue-icon.general-issue{background:rgba(107,114,128,.15);color:#6b7280}
.it-issue-body{flex:1;min-width:0}
.it-issue-number{font-size:11px;font-weight:700;color:var(--bronze,#8C6A3E);margin-bottom:2px}
.it-issue-title{font-size:14px;font-weight:650;color:var(--ash,#B5B7B9);line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.it-issue-desc{font-size:12px;color:var(--muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.it-issue-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}

/* ── Badges ─────────────────────────────────────── */
.it-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.it-badge.status-open{background:rgba(239,68,68,.15);color:#ef4444}
.it-badge.status-assigned{background:rgba(59,130,246,.15);color:#3b82f6}
.it-badge.status-in-progress{background:rgba(245,158,11,.15);color:#f59e0b}
.it-badge.status-resolved{background:rgba(34,197,94,.15);color:#22c55e}
.it-badge.status-approved{background:rgba(34,197,94,.25);color:#16a34a}
.it-badge.status-rejected{background:rgba(239,68,68,.2);color:#dc2626}
.it-badge.status-rework-requested{background:rgba(168,85,247,.15);color:#a855f7}
.it-badge.status-closed{background:rgba(107,114,128,.15);color:#9ca3af}
.it-badge.priority-critical{background:rgba(239,68,68,.2);color:#ef4444}
.it-badge.priority-high{background:rgba(245,158,11,.15);color:#f59e0b}
.it-badge.priority-medium{background:rgba(59,130,246,.12);color:#3b82f6}
.it-badge.priority-low{background:rgba(107,114,128,.12);color:#6b7280}

/* ── Aging / Overdue ────────────────────────────── */
.it-aging{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.it-aging.overdue{color:#ef4444;font-weight:700}
.it-aging svg{width:12px;height:12px}

/* ── Assignee Chip ──────────────────────────────── */
.it-assignee{font-size:11px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.it-assignee-avatar{width:18px;height:18px;border-radius:50%;background:var(--bronze,#8C6A3E);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0}
.it-unassigned{color:var(--muted);font-style:italic;font-size:11px}

/* ── Resolution Proof Indicator ─────────────────── */
.it-proof{font-size:10px;color:var(--muted);display:inline-flex;align-items:center;gap:3px}
.it-proof svg{width:12px;height:12px}
.it-proof.has-proof{color:#22c55e}

/* ── Empty State ────────────────────────────────── */
.it-empty{text-align:center;padding:48px 20px;color:var(--muted)}
.it-empty-icon{font-size:clamp(16px,2.4vw,28px);max-width:var(--tf-icon-hard-cap);margin-bottom:12px;opacity:.5}
.it-empty h3{font-size:15px;font-weight:700;color:var(--ash,#B5B7B9);margin:0 0 6px}
.it-empty p{font-size:13px;margin:0;line-height:1.5}

/* ── Detail View ────────────────────────────────── */
.it-detail{background:var(--graphite,#2E3136);border-radius:14px;border:1px solid var(--line);padding:16px;margin-bottom:12px}
.it-detail-header{margin-bottom:14px}
.it-detail-number{font-size:12px;font-weight:700;color:var(--bronze,#8C6A3E);margin-bottom:4px}
.it-detail-title{font-size:18px;font-weight:800;color:var(--ash);line-height:1.3;margin-bottom:6px}
.it-detail-desc{font-size:13px;color:var(--muted);line-height:1.5}
.it-detail-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.it-detail-field{font-size:12px}
.it-detail-field-label{color:var(--muted);font-weight:600;margin-bottom:2px;text-transform:uppercase;font-size:10px;letter-spacing:.04em}
.it-detail-field-value{color:var(--ash);font-weight:500}

/* ── Status Flow ────────────────────────────────── */
.it-flow{display:flex;align-items:center;gap:0;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.it-flow-step{display:flex;align-items:center;gap:0;white-space:nowrap}
.it-flow-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:2px solid var(--line);color:var(--muted);background:transparent;flex-shrink:0}
.it-flow-dot.active{border-color:var(--bronze,#8C6A3E);background:var(--bronze);color:#fff}
.it-flow-dot.done{border-color:#22c55e;background:rgba(34,197,94,.15);color:#22c55e}
.it-flow-dot.rejected{border-color:#ef4444;background:rgba(239,68,68,.15);color:#ef4444}
.it-flow-line{width:24px;height:2px;background:var(--line);flex-shrink:0}
.it-flow-line.done{background:#22c55e}
.it-flow-label{font-size:9px;color:var(--muted);text-align:center;margin-top:3px;text-transform:uppercase;letter-spacing:.03em}

/* ── Actions ────────────────────────────────────── */
.it-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.it-btn{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.it-btn svg{width:16px;height:16px}
.it-btn.primary{background:var(--bronze,#8C6A3E);color:#fff}
.it-btn.primary:hover{filter:brightness(1.15)}
.it-btn.success{background:#22c55e;color:#fff}
.it-btn.success:hover{background:#16a34a}
.it-btn.danger{background:#ef4444;color:#fff}
.it-btn.danger:hover{background:#dc2626}
.it-btn.warning{background:#f59e0b;color:#fff}
.it-btn.warning:hover{background:#d97706}
.it-btn.ghost{background:var(--graphite,#2E3136);color:var(--ash);border:1px solid var(--line)}
.it-btn.ghost:hover{border-color:var(--bronze)}
.it-btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Resolution Form ────────────────────────────── */
.it-resolve-form{background:var(--graphite,#2E3136);border-radius:14px;border:1px solid var(--line);padding:16px;margin-bottom:12px}
.it-resolve-form h3{font-size:15px;font-weight:700;color:var(--ash);margin:0 0 12px}
.it-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;border:1px solid var(--line,rgba(140,106,62,.35));background:var(--ink,#0f1114);color:var(--ash,#B5B7B9);font-size:14px;font-family:inherit;transition:border-color .15s}
.it-input:focus{outline:none;border-color:var(--bronze,#8C6A3E)}
.it-textarea{min-height:80px;resize:vertical}
.it-label{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.it-field{margin-bottom:12px}

/* ── Photo Upload ───────────────────────────────── */
.it-photo-area{border:2px dashed var(--line,rgba(140,106,62,.35));border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:border-color .15s;margin-bottom:12px}
.it-photo-area:hover{border-color:var(--bronze,#8C6A3E)}
.it-photo-area svg{width:32px;height:32px;color:var(--muted);margin-bottom:6px}
.it-photo-area p{font-size:12px;color:var(--muted);margin:0}
.it-photo-previews{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.it-photo-thumb{width:64px;height:64px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}
.it-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin:12px 0}
.it-photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer}

/* ── Thread / Activity ──────────────────────────── */
.it-thread{margin-bottom:16px}
.it-thread h3{font-size:14px;font-weight:700;color:var(--ash);margin:0 0 10px}
.it-thread-list{display:flex;flex-direction:column;gap:8px}
.it-thread-item{display:flex;gap:10px;padding:10px;background:var(--ink,#0f1114);border-radius:10px;border:1px solid rgba(140,106,62,.15)}
.it-thread-avatar{width:28px;height:28px;border-radius:50%;background:var(--bronze,#8C6A3E);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.it-thread-body{flex:1;min-width:0}
.it-thread-author{font-size:12px;font-weight:700;color:var(--ash)}
.it-thread-role{font-size:10px;color:var(--muted);margin-left:6px;font-weight:500}
.it-thread-msg{font-size:13px;color:var(--muted);line-height:1.4;margin-top:3px}
.it-thread-time{font-size:10px;color:rgba(181,183,185,.5);margin-top:4px}
.it-thread-type{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em;margin-left:6px}
.it-thread-type.status-update{background:rgba(59,130,246,.15);color:#3b82f6}
.it-thread-type.resolution-note{background:rgba(34,197,94,.15);color:#22c55e}
.it-thread-type.supervisor-approval{background:rgba(34,197,94,.2);color:#16a34a}
.it-thread-type.supervisor-rejection{background:rgba(239,68,68,.15);color:#ef4444}
.it-thread-type.rework-requested{background:rgba(168,85,247,.15);color:#a855f7}
.it-thread-type.assignment-updated{background:rgba(245,158,11,.15);color:#f59e0b}

/* ── Supervisor Review Panel ────────────────────── */
.it-review{background:linear-gradient(135deg,rgba(140,106,62,.08),rgba(140,106,62,.03));border:1px solid var(--bronze,#8C6A3E);border-radius:14px;padding:16px;margin-bottom:12px}
.it-review h3{font-size:15px;font-weight:700;color:var(--bronze,#8C6A3E);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.it-review h3 svg{width:18px;height:18px}
.it-review-proof{margin-bottom:12px}
.it-review-proof-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.it-review-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── Worker Issue Card (for profiles/crew) ──────── */
.it-worker-card{background:var(--graphite,#2E3136);border-radius:10px;padding:12px;border:1px solid var(--line)}
.it-worker-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.it-worker-stat{text-align:center}
.it-worker-stat-value{display:block;font-size:16px;font-weight:800;color:var(--ash)}
.it-worker-stat-label{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}
.it-worker-alert{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:8px 10px;font-size:11px;color:#ef4444;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:6px}
.it-worker-alert svg{width:14px;height:14px;flex-shrink:0}

/* ── Crew Board Issue Indicators ────────────────── */
.it-crew-badge{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px}
.it-crew-badge.has-issues{background:rgba(245,158,11,.15);color:#f59e0b}
.it-crew-badge.has-critical{background:rgba(239,68,68,.2);color:#ef4444}
.it-crew-badge.has-overdue{background:rgba(239,68,68,.15);color:#ef4444}
.it-crew-badge.clear{background:rgba(34,197,94,.12);color:#22c55e}

/* ── Toast ──────────────────────────────────────── */
.it-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--ink,#0f1114);color:var(--ash);padding:10px 20px;border-radius:10px;font-size:13px;font-weight:600;border:1px solid var(--bronze,#8C6A3E);z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none}
.it-toast.show{opacity:1}

/* ── Bottom Nav ─────────────────────────────────── */
.it-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--ink,#0f1114);border-top:1px solid var(--line);display:flex;padding:8px 12px;gap:6px;z-index:900;justify-content:center;max-width:640px;margin:0 auto}
.it-bottom-nav .it-btn{flex:1;justify-content:center;font-size:12px;padding:10px 8px}

/* ── Mobile Optimizations ───────────────────────── */
@media(max-width:520px){
  .it-stats{grid-template-columns:repeat(3,1fr)}
  .it-detail-info{grid-template-columns:1fr}
  .it-actions{flex-direction:column}
  .it-actions .it-btn{width:100%;justify-content:center}
  .it-review-actions{flex-direction:column}
  .it-review-actions .it-btn{width:100%;justify-content:center}
  .it-worker-stats{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:768px){
  .it-bottom-nav{display:none}
}