/* ========================================================================== Funeraire 360 — Field Agent Theme Activated when B2B colors adapted for mobile field use. Large touch targets, single-column card layout, mission-focused UI. ========================================================================== */ /* ======================================================================== Theme Token Mapping (B2B-based but mobile-adapted) ======================================================================== */ body.platform-agent { --color-primary: var(--b2b-primary); --color-primary-light: var(--b2b-primary-light); --color-primary-dark: var(--b2b-primary-dark); --color-secondary: var(--b2b-secondary); --color-accent: var(--b2b-accent); --color-bg: var(--b2b-bg); --color-surface: var(--b2b-surface); --color-surface-alt: var(--b2b-surface-alt); --color-border: var(--b2b-border); --color-border-light: var(--b2b-border-light); --color-text: var(--b2b-text); --color-text-muted: var(--b2b-text-muted); --color-text-inverse: var(--b2b-text-inverse); --color-error: var(--b2b-error); --color-error-light: var(--b2b-error-light); --color-success: var(--b2b-success); --color-success-light: var(--b2b-success-light); --color-warning: var(--b2b-warning); --color-warning-light: var(--b2b-warning-light); --font-family: var(--b2b-font-family); --font-family-heading: var(--b2b-font-family); --font-size-base: 15px; --line-height-base: 1.5; font-family: var(--b2b-font-family); font-size: 15px; line-height: 1.5; background-color: var(--b2b-bg); color: var(--b2b-text); } /* ======================================================================== Large Touch Targets (48px minimum) ======================================================================== */ body.platform-agent .btn { min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--text-base); border-radius: var(--radius-lg); } body.platform-agent .btn-lg { min-height: 56px; padding: var(--space-4) var(--space-6); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); } body.platform-agent .btn-icon { width: 48px; height: 48px; } body.platform-agent .btn-icon--lg { width: 56px; height: 56px; } body.platform-agent .input, body.platform-agent .select, body.platform-agent .textarea { min-height: 48px; padding: var(--space-3) var(--space-4); font-size: var(--text-base); border-radius: var(--radius-lg); } body.platform-agent .checkbox input, body.platform-agent .radio input { width: 24px; height: 24px; } body.platform-agent .tab-bar-item { min-height: 48px; } body.platform-agent .dropdown-item { padding: var(--space-3) var(--space-4); min-height: 48px; } /* ======================================================================== Mobile Layout — Agent ======================================================================== */ body.platform-agent .mobile-layout { max-width: 100%; } body.platform-agent .mobile-header { background-color: var(--b2b-primary); color: #FFFFFF; border-bottom: none; min-height: 60px; padding: var(--space-3) var(--space-4); } body.platform-agent .mobile-header-title { color: #FFFFFF; font-weight: var(--font-weight-bold); } body.platform-agent .mobile-header-back { color: #FFFFFF; } body.platform-agent .mobile-header-action { color: #FFFFFF; } body.platform-agent .mobile-content { padding: var(--space-4); padding-bottom: calc(var(--space-4) + 60px + env(safe-area-inset-bottom, 0)); } /* ======================================================================== Single Column Card List ======================================================================== */ body.platform-agent .mission-list { display: flex; flex-direction: column; gap: var(--space-3); } body.platform-agent .mission-card { background-color: #FFFFFF; border: 1px solid var(--b2b-border-light); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); transition: all var(--transition-fast); cursor: pointer; display: flex; flex-direction: column; gap: var(--space-3); } body.platform-agent .mission-card:hover { box-shadow: var(--shadow-md); } body.platform-agent .mission-card:active { transform: scale(0.99); } body.platform-agent .mission-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); } body.platform-agent .mission-card-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--b2b-text); } body.platform-agent .mission-card-ref { font-size: var(--text-xs); color: var(--b2b-text-muted); font-family: monospace; margin-top: var(--space-1); } body.platform-agent .mission-card-details { display: flex; flex-direction: column; gap: var(--space-2); } body.platform-agent .mission-card-detail { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--b2b-text-muted); } body.platform-agent .mission-card-detail-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--b2b-secondary); } body.platform-agent .mission-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--b2b-border-light); } body.platform-agent .mission-card-time { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--b2b-text); } /* Priority indicator */ body.platform-agent .mission-card--urgent { border-left: 4px solid var(--b2b-error); } body.platform-agent .mission-card--today { border-left: 4px solid var(--b2b-warning); } body.platform-agent .mission-card--upcoming { border-left: 4px solid var(--b2b-secondary); } /* ======================================================================== Mission Status Badges ======================================================================== */ body.platform-agent .mission-status { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; border-radius: var(--radius-full); white-space: nowrap; } body.platform-agent .mission-status--pending { background-color: var(--b2b-warning-light); color: #975A16; } body.platform-agent .mission-status--assigned { background-color: #EBF8FF; color: #2B6CB0; } body.platform-agent .mission-status--en-route { background-color: #FAF5FF; color: #6B46C1; } body.platform-agent .mission-status--on-site { background-color: #EBF8FF; color: #2B6CB0; } body.platform-agent .mission-status--in-progress { background-color: var(--b2b-warning-light); color: #975A16; } body.platform-agent .mission-status--completed { background-color: var(--b2b-success-light); color: #276749; } body.platform-agent .mission-status--cancelled { background-color: var(--b2b-error-light); color: #9B2C2C; } body.platform-agent .mission-status--delayed { background-color: var(--b2b-error-light); color: #C53030; } /* ======================================================================== Photo Capture Zone ======================================================================== */ body.platform-agent .photo-capture-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); border: 2px dashed var(--b2b-border); border-radius: var(--radius-lg); background-color: var(--b2b-surface-alt); cursor: pointer; transition: all var(--transition-fast); text-align: center; min-height: 200px; } body.platform-agent .photo-capture-zone:hover, body.platform-agent .photo-capture-zone:active { border-color: var(--b2b-secondary); background-color: rgba(74, 111, 165, 0.05); } body.platform-agent .photo-capture-icon { width: 48px; height: 48px; color: var(--b2b-secondary); margin-bottom: var(--space-3); } body.platform-agent .photo-capture-text { font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--b2b-text); margin-bottom: var(--space-1); } body.platform-agent .photo-capture-hint { font-size: var(--text-sm); color: var(--b2b-text-muted); } /* Photo preview grid */ body.platform-agent .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-3); } body.platform-agent .photo-thumb { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; } body.platform-agent .photo-thumb img { width: 100%; height: 100%; object-fit: cover; } body.platform-agent .photo-thumb-remove { position: absolute; top: var(--space-1); right: var(--space-1); width: 24px; height: 24px; border-radius: var(--radius-full); background-color: rgba(0, 0, 0, 0.6); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; font-size: 12px; } /* ======================================================================== Status Update Buttons (Large, Color-Coded) ======================================================================== */ body.platform-agent .status-actions { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; } body.platform-agent .status-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 56px; padding: var(--space-4) var(--space-6); font-size: var(--text-lg); font-weight: var(--font-weight-semibold); border-radius: var(--radius-lg); border: none; cursor: pointer; transition: all var(--transition-fast); } body.platform-agent .status-btn:active { transform: scale(0.98); } body.platform-agent .status-btn--start { background-color: var(--b2b-accent); color: #FFFFFF; } body.platform-agent .status-btn--start:hover { background-color: var(--b2b-accent-dark); } body.platform-agent .status-btn--arrive { background-color: var(--b2b-secondary); color: #FFFFFF; } body.platform-agent .status-btn--arrive:hover { background-color: var(--b2b-secondary-dark); } body.platform-agent .status-btn--complete { background-color: var(--b2b-success); color: #FFFFFF; } body.platform-agent .status-btn--complete:hover { background-color: var(--b2b-success-dark); } body.platform-agent .status-btn--issue { background-color: #FFFFFF; color: var(--b2b-error); border: 2px solid var(--b2b-error); } body.platform-agent .status-btn--issue:hover { background-color: var(--b2b-error-light); } body.platform-agent .status-btn-icon { width: 24px; height: 24px; flex-shrink: 0; } /* ======================================================================== Agent Tab Bar ======================================================================== */ body.platform-agent .tab-bar { background-color: var(--b2b-primary); border-top: none; height: calc(60px + env(safe-area-inset-bottom, 0)); } body.platform-agent .tab-bar-item { color: rgba(255, 255, 255, 0.6); font-size: 11px; min-height: 48px; } body.platform-agent .tab-bar-item--active { color: #FFFFFF; } body.platform-agent .tab-bar-item--active .tab-bar-icon { color: var(--b2b-accent); } /* ======================================================================== Mission Detail Header ======================================================================== */ body.platform-agent .mission-detail-header { background-color: #FFFFFF; padding: var(--space-4); border-bottom: 1px solid var(--b2b-border-light); } body.platform-agent .mission-detail-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--b2b-text); } body.platform-agent .mission-detail-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } body.platform-agent .mission-detail-meta-item { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--b2b-text-muted); } /* ======================================================================== Signature Pad ======================================================================== */ body.platform-agent .signature-pad { border: 2px solid var(--b2b-border); border-radius: var(--radius-lg); background-color: #FFFFFF; min-height: 200px; position: relative; touch-action: none; } body.platform-agent .signature-pad-label { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); font-size: var(--text-sm); color: var(--b2b-text-muted); pointer-events: none; } body.platform-agent .signature-pad-line { position: absolute; bottom: var(--space-10); left: var(--space-6); right: var(--space-6); height: 1px; background-color: var(--b2b-border); pointer-events: none; } body.platform-agent .signature-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); } /* ======================================================================== GPS / Map Container ======================================================================== */ body.platform-agent .map-container { width: 100%; height: 200px; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--b2b-surface-alt); border: 1px solid var(--b2b-border-light); } body.platform-agent .map-container--large { height: 300px; } body.platform-agent .map-address { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); background-color: #FFFFFF; border-radius: var(--radius-lg); margin-top: var(--space-2); } body.platform-agent .map-address-text { font-size: var(--text-sm); color: var(--b2b-text); line-height: var(--leading-relaxed); } body.platform-agent .map-address-navigate { flex-shrink: 0; min-height: 48px; } /* ======================================================================== Checklist for Agent Tasks ======================================================================== */ body.platform-agent .agent-checklist { display: flex; flex-direction: column; gap: var(--space-2); } body.platform-agent .agent-checklist-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: #FFFFFF; border: 1px solid var(--b2b-border-light); border-radius: var(--radius-lg); min-height: 48px; cursor: pointer; transition: all var(--transition-fast); } body.platform-agent .agent-checklist-item:active { background-color: var(--b2b-surface-alt); } body.platform-agent .agent-checklist-item--done { opacity: 0.6; } body.platform-agent .agent-checklist-item--done .agent-checklist-text { text-decoration: line-through; } body.platform-agent .agent-checklist-check { width: 24px; height: 24px; border-radius: var(--radius-full); border: 2px solid var(--b2b-border); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); } body.platform-agent .agent-checklist-item--done .agent-checklist-check { border-color: var(--b2b-success); background-color: var(--b2b-success); color: #FFFFFF; } body.platform-agent .agent-checklist-text { font-size: var(--text-base); color: var(--b2b-text); flex: 1; } /* ======================================================================== Offline Indicator ======================================================================== */ body.platform-agent .offline-banner { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background-color: var(--b2b-warning); color: #FFFFFF; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); text-align: center; } body.platform-agent .offline-banner-icon { width: 16px; height: 16px; } /* Sync status */ body.platform-agent .sync-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--b2b-text-muted); padding: var(--space-2) var(--space-4); } body.platform-agent .sync-status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; } body.platform-agent .sync-status-dot--synced { background-color: var(--b2b-success); } body.platform-agent .sync-status-dot--pending { background-color: var(--b2b-warning); animation: pulse 2s infinite; } body.platform-agent .sync-status-dot--error { background-color: var(--b2b-error); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ======================================================================== Quick Call / Contact Button ======================================================================== */ body.platform-agent .quick-call { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background-color: #FFFFFF; border: 1px solid var(--b2b-border-light); border-radius: var(--radius-lg); cursor: pointer; transition: all var(--transition-fast); min-height: 56px; } body.platform-agent .quick-call:active { background-color: var(--b2b-surface-alt); } body.platform-agent .quick-call-icon { width: 40px; height: 40px; border-radius: var(--radius-full); background-color: var(--b2b-success); color: #FFFFFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.platform-agent .quick-call-info { flex: 1; min-width: 0; } body.platform-agent .quick-call-name { font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--b2b-text); } body.platform-agent .quick-call-role { font-size: var(--text-sm); color: var(--b2b-text-muted); }