/* ============================================================
   DSR Field Tracker - App Stylesheet
   ============================================================ */

/* ---------- Base ---------- */
* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ---------- LOGIN PAGE ---------- */
.login-body {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-wrapper { width: 100%; max-width: 420px; }
.login-card {
    background: white;
    border-radius: 24px;
    padding: 36px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.logo-circle {
    width: 72px; height: 72px;
    background: #2563eb;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
}
.login-title { font-size: 1.5rem; font-weight: 700; margin: 0; color: #1e293b; }
.login-sub   { color: #64748b; font-size: 0.9rem; margin: 4px 0 0; }

/* ---------- MAIN APP BODY ---------- */
.app-body {
    background: #f1f5f9;
    min-height: 100vh;
}
.app-container {
    padding: 0 16px 20px;
    max-width: 500px;
    margin: 0 auto;
}

/* ---------- APP NAVBAR ---------- */
.app-navbar {
    background: #1d4ed8;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nav-avatar {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 1rem;
}
.nav-name   { color: white;  font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.nav-sub    { color: rgba(255,255,255,0.7); font-size: 0.75rem; }
.nav-logout { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.85rem; }
.nav-logout:hover { color: white; }
.nav-back      { color: white; text-decoration: none; font-size: 0.9rem; }
.nav-page-title { color: white; font-weight: 600; }

.sync-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    display: inline-block;
    transition: background 0.3s;
}
.sync-online  { background: #4ade80; }
.sync-offline { background: #f87171; }
.sync-syncing {
    background: #facc15;
    animation: pulse 0.8s infinite;
}

/* Sync feedback bar */
.sync-feedback {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
}
.sync-success { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.sync-error   { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.sync-info    { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }

/* ---------- PROGRESS CARDS ---------- */
.section-title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 10px;
}
.progress-card {
    background: white;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.progress-label  { font-weight: 600; color: #334155; font-size: 0.95rem; }
.progress-actual { font-size: 2rem; font-weight: 700; color: #1e293b; line-height: 1; }
.progress-sep    { font-size: 1.5rem; color: #94a3b8; margin: 0 4px; }
.progress-target { font-size: 1.3rem; color: #94a3b8; }
.progress-pct    { font-size: 1.1rem; font-weight: 700; }

/* ---------- VISIT CARDS (action buttons) ---------- */
.btn-visit-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    text-decoration: none;
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: transform 0.15s, box-shadow 0.15s;
}
.btn-visit-card:hover, .btn-visit-card:active {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}
.btn-blue  { background: #2563eb; }
.btn-green { background: #16a34a; }
.visit-card-icon { flex-shrink: 0; opacity: 0.9; }
.visit-card-title { font-weight: 700; font-size: 1.05rem; }
.visit-card-sub   { font-size: 0.85rem; opacity: 0.8; margin-top: 2px; }

/* ---------- RECENT SUBMISSIONS LIST ---------- */
.visit-item {
    background: white;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.visit-item-left  { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.visit-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.visit-name       { font-size: 0.9rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.visit-date       { font-size: 0.75rem; color: #94a3b8; }
.visit-badge      { font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; flex-shrink: 0; }
.badge-blue  { background: #dbeafe; color: #1d4ed8; }
.badge-green { background: #dcfce7; color: #15803d; }

/* Status badges */
.status-badge {
    font-size: 0.7rem; font-weight: 600;
    padding: 2px 8px; border-radius: 99px;
    text-transform: capitalize;
}
.status-pending    { background: #fef3c7; color: #92400e; }
.status-approved   { background: #dcfce7; color: #15803d; }
.status-rejected   { background: #fee2e2; color: #991b1b; }
.status-suspicious { background: #fce7f3; color: #9d174d; }

/* ---------- FORM PAGES ---------- */
.form-section {
    background: white;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.form-section-title {
    font-weight: 700; font-size: 0.9rem;
    color: #1d4ed8; margin-bottom: 14px;
}
.required-label::after { content: ' *'; color: #dc2626; }

/* Radio buttons styled nicely */
.radio-option { display: flex; align-items: center; }
.radio-input  { width: 20px; height: 20px; cursor: pointer; accent-color: #2563eb; }
.radio-label  {
    margin-left: 8px; padding: 8px 20px;
    background: #f8fafc; border: 2px solid #e2e8f0;
    border-radius: 10px; cursor: pointer;
    font-weight: 500; transition: all 0.15s;
}
.radio-input:checked + .radio-label {
    background: #eff6ff; border-color: #2563eb; color: #1d4ed8;
}

/* Project type grid */
.project-type-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.project-type-option { position: relative; }
.project-type-option .radio-input { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; top:0; left:0; }
.project-type-label {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 14px; text-align: center;
    background: #f8fafc; border: 2px solid #e2e8f0;
    border-radius: 12px; cursor: pointer;
    font-weight: 600; font-size: 0.9rem;
    transition: all 0.15s;
}
.project-type-option:has(.radio-input:checked) .project-type-label {
    background: #eff6ff; border-color: #2563eb; color: #1d4ed8;
}

/* GPS status indicator */
.gps-status {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: #f0fdf4; border-radius: 8px;
    font-size: 0.85rem; color: #15803d;
    margin-bottom: 12px;
}
.gps-dot {
    width: 8px; height: 8px;
    border-radius: 50%; background: #4ade80;
    animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

/* Photo capture area */
.photo-capture-area {
    border: 2px dashed #93c5fd;
    border-radius: 12px;
    min-height: 140px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-align: center;
    background: #eff6ff; color: #1d4ed8;
    font-weight: 500; overflow: hidden;
    transition: all 0.15s;
}
.photo-capture-area:hover { border-color: #2563eb; background: #dbeafe; }
.photo-capture-area img {
    width: 100%; max-height: 200px;
    object-fit: cover; border-radius: 10px;
}

/* Action button */
.btn-action {
    border-radius: 14px !important;
    padding: 14px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

/* Offline banner */
.offline-banner {
    background: #fef3c7; color: #92400e;
    border-radius: 10px; padding: 10px 14px;
    font-size: 0.9rem; margin-bottom: 12px;
    border: 1px solid #fde68a;
}
.pending-notice {
    background: #fef3c7; border: 1px solid #fde68a;
    border-radius: 10px; padding: 10px 14px;
    font-size: 0.875rem; color: #92400e;
}
.empty-state {
    text-align: center; color: #94a3b8;
    padding: 24px; background: white;
    border-radius: 12px; font-size: 0.9rem;
}

/* ---------- HISTORY PAGE ---------- */
.history-card {
    background: white; border-radius: 12px;
    padding: 14px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.history-name   { font-weight: 600; color: #1e293b; font-size: 0.95rem; }
.history-detail { font-size: 0.8rem; color: #64748b; margin-top: 3px; }
.history-note   { font-size: 0.8rem; color: #1d4ed8; margin-top: 4px; }
.history-flag   { font-size: 0.8rem; color: #dc2626; margin-top: 4px; }

/* ---------- ADMIN REVIEW CARDS ---------- */
.review-card {
    background: white; border-radius: 14px;
    padding: 18px; margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    border: 1.5px solid #e2e8f0;
}
.review-card.border-danger { border-color: #fca5a5; background: #fff5f5; }
.review-card-header { margin-bottom: 10px; }
.fraud-flag-box {
    background: #fff7ed; border: 1px solid #fed7aa;
    border-radius: 8px; padding: 8px 12px;
    font-size: 0.85rem; color: #c2410c;
    margin-bottom: 10px;
}
.review-details {
    font-size: 0.875rem; color: #475569;
    display: grid; gap: 4px; margin-bottom: 12px;
}
.review-photos {
    display: flex; gap: 12px; margin-bottom: 14px;
    flex-wrap: wrap;
}
.review-photo {
    width: 140px; height: 105px;
    object-fit: cover; border-radius: 10px;
    cursor: pointer; border: 2px solid #e2e8f0;
    transition: transform 0.15s;
}
.review-photo:hover { transform: scale(1.03); }
.review-action-form { padding-top: 10px; border-top: 1px solid #f1f5f9; }
.review-done {
    font-weight: 600; font-size: 0.9rem;
    padding: 8px; text-align: center;
    border-radius: 8px; margin-top: 10px;
}
.review-done.status-approved { background:#dcfce7; color:#15803d; }
.review-done.status-rejected { background:#fee2e2; color:#991b1b; }

/* ================================================================
   GPS BUTTON
   ================================================================ */
.btn-gps {
    width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
    border: 2px dashed #93c5fd;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    margin-bottom: 10px;
}
.btn-gps:hover, .btn-gps:active {
    background: #dbeafe;
    border-color: #3b82f6;
}
.btn-gps-done {
    border-color: #4ade80 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-style: solid !important;
}
.btn-gps-idle {
    border-color: #f87171 !important;
    background: #fef2f2 !important;
    color: #b91c1c !important;
}
.gps-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(29,78,216,0.3);
    border-top-color: #1d4ed8;
    border-radius: 50%;
    display: inline-block;
    animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   DEVICE INFO STRIP (bottom of dashboard)
   ================================================================ */
.device-strip {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 10px;
}
.device-strip-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.device-strip-name {
    font-weight: 600;
    color: #334155;
}
.device-strip-locked {
    margin-left: auto;
    background: #dcfce7;
    color: #15803d;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    flex-shrink: 0;
}