/* Warranty Tracker Plugin Styles */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Sora:wght@400;500;600&display=swap');

.wt-wrap { font-family: 'Sora', sans-serif; max-width: 960px; margin: 0 auto; padding: 1.5rem 0; color: #1a1a1a; }
.wt-wrap *, .wt-wrap *::before, .wt-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Header */
.wt-header { display: flex; align-items: center; gap: 14px; margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e5e7eb; }
.wt-shield { width: 44px; height: 44px; background: #eff6ff; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wt-shield svg { width: 22px; height: 22px; stroke: #2563eb; }
.wt-title { font-size: 20px; font-weight: 600; color: #111827; margin: 0 !important; }
.wt-sub { font-size: 13px; color: #6b7280; margin: 2px 0 0 !important; }

/* Lookup bar */
.wt-lookup-bar { display: flex; gap: 8px; margin-bottom: 2rem; }
.wt-lookup-bar input { flex: 1; font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 0 12px; height: 38px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; outline: none; }
.wt-lookup-bar input::placeholder { text-transform: none; letter-spacing: 0; }
.wt-lookup-bar input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.wt-lookup-bar button { height: 38px; padding: 0 16px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #374151; font-family: 'Sora', sans-serif; font-size: 13px; cursor: pointer; white-space: nowrap; }
.wt-lookup-bar button:hover { background: #f9fafb; }

/* Result card */
.wt-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 2rem; }
.wt-card-header { padding: 1rem 1.25rem; background: #f9fafb; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e7eb; }
.wt-prod { font-size: 15px; font-weight: 500; color: #111827; }
.wt-sn  { font-family: 'DM Mono', monospace; font-size: 12px; color: #6b7280; margin-top: 3px; letter-spacing: .05em; }

/* Badges */
.wt-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wt-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.wt-badge.active   { background: #f0fdf4; color: #166534; }
.wt-badge.expiring { background: #fffbeb; color: #92400e; }
.wt-badge.expired  { background: #fef2f2; color: #991b1b; }

/* Stat grid */
.wt-stat-grid { padding: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wt-stat { background: #f9fafb; border-radius: 8px; padding: 12px 14px; }
.wt-stat label { font-size: 12px; color: #6b7280; margin-bottom: 6px; display: block; }
.wt-stat-val { font-size: 15px; font-weight: 500; color: #111827; display: block; }
.wt-stat-val.mono { font-family: 'DM Mono', monospace; font-size: 13px; }
.wt-days { font-size: 12px; color: #6b7280; margin-top: 2px; }

/* Timeline */
.wt-timeline { padding: 1.25rem; border-top: 1px solid #e5e7eb; }
.wt-tl-label { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.wt-tl-bar { height: 8px; border-radius: 4px; background: #f3f4f6; overflow: hidden; margin-bottom: 6px; }
.wt-tl-fill { height: 100%; border-radius: 4px; background: #16a34a; transition: width .6s ease; }
.wt-tl-fill.expiring { background: #d97706; }
.wt-tl-fill.expired  { background: #dc2626; }
.wt-tl-dates { display: flex; justify-content: space-between; font-size: 11px; color: #9ca3af; font-family: 'DM Mono', monospace; }

/* Invoice section */
.wt-invoice-section { border-top: 1px solid #e5e7eb; padding: 1.25rem; }
.wt-inv-title { font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.wt-inv-title svg { width: 15px; height: 15px; stroke: #6b7280; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Drop zone */
.wt-drop-zone { border: 1px dashed #d1d5db; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: background .15s; position: relative; }
.wt-drop-zone:hover, .wt-drop-zone.drag { background: #f9fafb; }
.wt-drop-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wt-drop-icon { width: 28px; height: 28px; margin: 0 auto 8px; stroke: #9ca3af; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; }
.wt-drop-text { font-size: 13px; color: #6b7280; }
.wt-drop-sub  { font-size: 11px; color: #9ca3af; margin-top: 4px; }
.wt-uploading { font-size: 13px; color: #2563eb; padding: 12px 0; text-align: center; }

/* Attached invoice */
.wt-inv-attached { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #f9fafb; border-radius: 8px; border: 1px solid #e5e7eb; }
.wt-inv-icon { width: 32px; height: 32px; background: #eff6ff; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wt-inv-icon svg { width: 16px; height: 16px; stroke: #2563eb; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wt-inv-name { font-size: 13px; font-weight: 500; color: #111827; word-break: break-all; }
.wt-inv-size { font-size: 11px; color: #6b7280; margin-top: 2px; }
.wt-inv-actions { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }
.wt-inv-btn { height: 30px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #374151; font-size: 12px; cursor: pointer; font-family: 'Sora', sans-serif; white-space: nowrap; }
.wt-inv-btn:hover { background: #f9fafb; }
.wt-inv-btn.del { color: #dc2626; border-color: #fca5a5; }

/* Table */
.wt-table-wrap { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; overflow-x: auto; }
.wt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.wt-table thead tr { background: #f9fafb; }
.wt-table th { padding: 10px 14px; text-align: left; font-weight: 500; color: #6b7280; font-size: 12px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.wt-table td { padding: 10px 14px; border-bottom: 1px solid #e5e7eb; color: #111827; }
.wt-table tr:last-child td { border-bottom: none; }
.wt-table tr:hover td { background: #f9fafb; }
.wt-table .mono { font-family: 'DM Mono', monospace; font-size: 12px; letter-spacing: .04em; }
.wt-view-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: #eff6ff; color: #2563eb; border-radius: 6px; font-size: 11px; cursor: pointer; border: none; font-family: 'Sora', sans-serif; }
.wt-view-pill:hover { background: #dbeafe; }

/* Add section */
.wt-add-section { border: 1px solid #e5e7eb; border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.wt-section-title { font-size: 14px; font-weight: 500; color: #111827; margin-bottom: 1rem !important; }
.wt-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.wt-form-row input, .wt-form-row select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; font-family: 'Sora', sans-serif; font-size: 13px; outline: none; }
.wt-form-row input:focus, .wt-form-row select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.wt-btn-primary { height: 36px; padding: 0 16px; border: 1px solid #2563eb; border-radius: 8px; background: #eff6ff; color: #2563eb; font-family: 'Sora', sans-serif; font-size: 13px; cursor: pointer; }
.wt-btn-primary:hover { background: #dbeafe; }

/* Message */
.wt-message { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 1rem; }
.wt-message.error   { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.wt-message.success { background: #f0fdf4; color: #166534; border: 1px solid #86efac; }
.wt-empty { text-align: center; padding: 2.5rem; color: #6b7280; font-size: 14px; }

/* Invoice preview overlay */
#wt-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.wt-preview-box { background: #fff; border-radius: 12px; overflow: hidden; max-width: 720px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.wt-preview-hdr { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.wt-preview-hdr span { font-size: 13px; font-weight: 500; color: #111827; font-family: 'Sora', sans-serif; }
.wt-preview-hdr button { width: 28px; height: 28px; border: none; background: #f3f4f6; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; color: #6b7280; }
.wt-preview-body { flex: 1; overflow: auto; padding: 16px; display: flex; align-items: flex-start; justify-content: center; }
.wt-preview-body img { max-width: 100%; border-radius: 4px; }
.wt-preview-body iframe { width: 100%; height: 520px; border: none; border-radius: 4px; }

@media (max-width: 600px) {
    .wt-stat-grid { grid-template-columns: 1fr; }
    .wt-form-row  { grid-template-columns: 1fr; }
    .wt-lookup-bar { flex-wrap: wrap; }
    .wt-inv-actions { flex-direction: column; }
}