/* ===== Repair Tickets Frontend Styles ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
    --rt-primary: #0066FF;
    --rt-success: #00B37E;
    --rt-bg: #F4F6FA;
    --rt-card: #FFFFFF;
    --rt-border: #E2E8F0;
    --rt-text: #1A202C;
    --rt-muted: #718096;
    --rt-mono: 'IBM Plex Mono', monospace;
    --rt-sans: 'Plus Jakarta Sans', sans-serif;
}

.rt-tracker-wrap {
    max-width: 600px;
    margin: 0 auto;
    font-family: var(--rt-sans);
    padding: 20px;
}

.rt-tracker-header {
    text-align: center;
    padding: 32px 24px 24px;
    background: linear-gradient(135deg, #0066FF 0%, #0044BB 100%);
    border-radius: 16px 16px 0 0;
    color: white;
}
.rt-tracker-icon { font-size: 40px; margin-bottom: 10px; }
.rt-tracker-header h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.rt-tracker-header p { margin: 0; opacity: .85; font-size: 14.5px; }

.rt-tracker-form {
    background: var(--rt-card);
    padding: 28px 24px;
    border: 1px solid var(--rt-border);
    border-top: none;
}
.rt-track-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 480px) { .rt-track-row { grid-template-columns: 1fr; } }
.rt-track-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--rt-text); }
.rt-track-input { width: 100%; padding: 10px 14px; border: 1.5px solid var(--rt-border); border-radius: 8px; font-size: 14.5px; font-family: var(--rt-sans); outline: none; box-sizing: border-box; transition: border .15s, box-shadow .15s; }
.rt-track-input:focus { border-color: var(--rt-primary); box-shadow: 0 0 0 3px rgba(0,102,255,.1); }

.rt-track-btn { width: 100%; padding: 13px; background: var(--rt-primary); color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--rt-sans); transition: background .15s, transform .1s; }
.rt-track-btn:hover { background: #0052CC; }
.rt-track-btn:active { transform: scale(.99); }
.rt-track-btn-outline { margin-top: 20px; background: transparent; color: var(--rt-primary); border: 2px solid var(--rt-primary); }
.rt-track-btn-outline:hover { background: var(--rt-primary); color: white; }

.rt-track-error { padding: 14px 18px; background: #FEF2F2; color: #991B1B; border-radius: 8px; border: 1px solid #FECACA; font-size: 14px; margin-top: 16px; border-top: 1px solid var(--rt-border); }

/* Result */
.rt-track-result {
    background: var(--rt-card);
    border: 1px solid var(--rt-border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 24px;
    animation: rtFadeIn .3s ease;
}
@keyframes rtFadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } }

.rt-result-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.rt-result-ticket-num { font-family: var(--rt-mono); font-size: 22px; color: var(--rt-primary); font-weight: 600; }
.rt-status-badge { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.rt-status-badge.received         { background: #EEF2FF; color: #3730A3; }
.rt-status-badge.inspecting       { background: #FFF7ED; color: #9A3412; }
.rt-status-badge.waiting_parts    { background: #FFFBEB; color: #92400E; }
.rt-status-badge.waiting_approval { background: #F0F9FF; color: #075985; }
.rt-status-badge.unrepairable     { background: #FEF2F2; color: #991B1B; }
.rt-status-badge.delivered        { background: #ECFDF5; color: #065F46; }

.rt-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
.rt-result-item { background: var(--rt-bg); border-radius: 10px; padding: 12px 14px; }
.rt-result-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rt-muted); margin-bottom: 4px; }
.rt-result-value { font-size: 14.5px; font-weight: 600; color: var(--rt-text); }

.rt-result-section { padding: 16px; background: var(--rt-bg); border-radius: 10px; margin-bottom: 14px; }
.rt-result-section h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--rt-muted); text-transform: uppercase; letter-spacing: .05em; }
.rt-result-section p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.rt-result-cost { font-family: var(--rt-mono); font-size: 20px; font-weight: 700; color: var(--rt-primary); margin: 0; }

/* Timeline */
.rt-status-timeline { display: flex; gap: 0; margin-bottom: 20px; overflow-x: auto; padding: 4px 0; }
.rt-timeline-step { flex: 1; min-width: 80px; text-align: center; position: relative; }
.rt-timeline-step::before { content: ''; position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: var(--rt-border); z-index: 0; }
.rt-timeline-step:last-child::before { display: none; }
.rt-timeline-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--rt-border); margin: 0 auto 6px; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 12px; border: 3px solid white; }
.rt-timeline-step.done .rt-timeline-dot { background: var(--rt-success); }
.rt-timeline-step.current .rt-timeline-dot { background: var(--rt-primary); box-shadow: 0 0 0 4px rgba(0,102,255,.2); }
.rt-timeline-label { font-size: 10px; color: var(--rt-muted); line-height: 1.3; }
.rt-timeline-step.done .rt-timeline-label, .rt-timeline-step.current .rt-timeline-label { color: var(--rt-text); font-weight: 600; }

/* ── Action Buttons (Print / Export) ── */
.rt-result-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.rt-track-btn-action {
    flex: 1;
    min-width: 140px;
    background: #fff;
    color: var(--rt-primary);
    border: 2px solid var(--rt-primary);
    font-weight: 700;
    font-size: 14px;
    padding: 11px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--rt-sans);
    transition: background .15s, color .15s;
}
.rt-track-btn-action:hover {
    background: var(--rt-primary);
    color: #fff;
}
.rt-track-btn-action:nth-child(2) {
    color: var(--rt-success);
    border-color: var(--rt-success);
}
.rt-track-btn-action:nth-child(2):hover {
    background: var(--rt-success);
    color: #fff;
}
.rt-track-btn-outline {
    flex: 1;
    min-width: 140px;
}
@media (max-width: 480px) {
    .rt-result-actions { flex-direction: column; }
    .rt-track-btn-action, .rt-track-btn-outline { width: 100%; flex: none; }
}