/* Society Visitor Management — Frontend Styles */

.svm-app {
	--svm-primary: #0f766e;
	--svm-primary-dark: #0b5a54;
	--svm-primary-light: #ccfbf1;
	--svm-accent: #f59e0b;
	--svm-danger: #dc2626;
	--svm-danger-light: #fee2e2;
	--svm-success: #16a34a;
	--svm-success-light: #dcfce7;
	--svm-warn: #d97706;
	--svm-warn-light: #fef3c7;
	--svm-bg: #f7f8f9;
	--svm-card-bg: #ffffff;
	--svm-text: #1f2937;
	--svm-text-muted: #6b7280;
	--svm-border: #e5e7eb;
	--svm-radius: 14px;
	--svm-shadow: 0 2px 10px rgba(0,0,0,0.06);

	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--svm-text);
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
}
.svm-app * { box-sizing: border-box; }

.svm-app.svm-dark, .svm-resident-dashboard.svm-dark {
	--svm-bg: #111827;
	--svm-card-bg: #1f2937;
	--svm-text: #f3f4f6;
	--svm-text-muted: #9ca3af;
	--svm-border: #374151;
	background: var(--svm-bg);
}

/* ---------------- Notices / login ---------------- */
.svm-notice { padding: 16px; border-radius: var(--svm-radius); background: #eff6ff; border: 1px solid #bfdbfe; margin: 16px 0; }
.svm-notice-error { background: var(--svm-danger-light); border-color: #fca5a5; }
.svm-notice-info { background: #eff6ff; border-color: #bfdbfe; }

/* ---------------- Kiosk ---------------- */
.svm-kiosk-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.svm-kiosk-header h2 { margin: 0; font-size: 22px; }

.svm-segment-toggle { display: flex; gap: 4px; background: var(--svm-border); padding: 4px; border-radius: 999px; }
.svm-seg-btn { border: none; background: transparent; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--svm-text-muted); }
.svm-seg-btn.active { background: var(--svm-primary); color: #fff; }

.svm-type-tabs { display:flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; }
.svm-type-tab { flex: 1; min-width: 120px; padding: 14px 10px; border: 2px solid var(--svm-border); background: var(--svm-card-bg); border-radius: var(--svm-radius); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--svm-text-muted); transition: all .15s; }
.svm-type-tab.active { border-color: var(--svm-primary); color: var(--svm-primary); background: var(--svm-primary-light); }

.svm-photo-capture { text-align: center; margin-bottom: 20px; }
.svm-camera-frame { width: 100%; max-width: 340px; aspect-ratio: 4/3; margin: 0 auto; background: #000; border-radius: var(--svm-radius); overflow: hidden; position: relative; }
.svm-camera-frame video, .svm-camera-frame img { width: 100%; height: 100%; object-fit: cover; }
.svm-camera-actions { margin-top: 12px; display:flex; gap: 10px; justify-content: center; }
.svm-hint { font-size: 12px; color: var(--svm-text-muted); margin-top: 8px; }

.svm-field-group { background: var(--svm-card-bg); border-radius: var(--svm-radius); padding: 18px; margin-bottom: 16px; box-shadow: var(--svm-shadow); }
.svm-field-group label { display: block; font-size: 13px; font-weight: 600; color: var(--svm-text-muted); margin-bottom: 14px; }
.svm-field-group input[type=text], .svm-field-group input[type=tel], .svm-field-group input[type=email], .svm-field-group select {
	display: block; width: 100%; padding: 12px 14px; margin-top: 6px; border: 1px solid var(--svm-border); border-radius: 10px; font-size: 15px; background: var(--svm-card-bg); color: var(--svm-text);
}
.svm-checkbox-inline { display: flex !important; align-items: center; gap: 8px; }
.svm-checkbox-inline input { width: auto !important; }

.svm-autocomplete-results { margin-top: 6px; }
.svm-autocomplete-item { padding: 10px 14px; background: var(--svm-bg); border-radius: 8px; margin-bottom: 4px; cursor: pointer; font-size: 14px; }
.svm-autocomplete-item:hover { background: var(--svm-primary-light); }

.svm-selected-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.svm-chip { background: var(--svm-primary); color: #fff; padding: 6px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; }

.svm-submit-btn { width: 100%; padding: 16px !important; font-size: 16px !important; font-weight: 700; border-radius: var(--svm-radius) !important; background: var(--svm-primary) !important; border-color: var(--svm-primary) !important; }

.svm-kiosk-result { background: var(--svm-card-bg); border-radius: var(--svm-radius); padding: 24px; text-align: center; box-shadow: var(--svm-shadow); }
.svm-kiosk-result code { display:inline-block; background: var(--svm-bg); padding: 6px 10px; border-radius: 6px; font-size: 12px; word-break: break-all; }

/* ---------------- Resident Dashboard ---------------- */
.svm-dash-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: 24px; }
.svm-dash-header h2 { margin: 0 0 6px; }
.svm-theme-toggle { border: none; background: var(--svm-card-bg); box-shadow: var(--svm-shadow); border-radius: 50%; width: 42px; height: 42px; cursor: pointer; font-size: 18px; }

.svm-section { margin-bottom: 28px; }
.svm-section h3 { display:flex; align-items:center; gap: 8px; font-size: 17px; margin-bottom: 14px; }
.svm-count-badge { background: var(--svm-accent); color:#fff; font-size: 12px; padding: 2px 9px; border-radius: 999px; font-weight: 700; }

.svm-visitor-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.svm-visitor-card { background: var(--svm-card-bg); border-radius: var(--svm-radius); padding: 16px; box-shadow: var(--svm-shadow); display: flex; flex-direction: column; gap: 10px; }
.svm-visitor-photo { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; }
.svm-visitor-info strong { display:block; font-size: 15px; margin-bottom: 4px; }
.svm-visitor-info p { margin: 4px 0; font-size: 13px; color: var(--svm-text-muted); }
.svm-purpose { font-style: italic; }
.svm-responder-select select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--svm-border); font-size: 13px; }
.svm-visitor-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.svm-visitor-actions button { flex: 1; min-width: 90px; padding: 10px 8px !important; font-size: 12px !important; border-radius: 8px !important; font-weight: 600; }
.svm-btn-approve { background: var(--svm-success) !important; color: #fff !important; border-color: var(--svm-success) !important; }
.svm-btn-comedown { background: var(--svm-warn) !important; color: #fff !important; border-color: var(--svm-warn) !important; }
.svm-btn-reject { background: var(--svm-danger) !important; color: #fff !important; border-color: var(--svm-danger) !important; }

.svm-empty-state { color: var(--svm-text-muted); font-size: 14px; padding: 20px; text-align: center; background: var(--svm-card-bg); border-radius: var(--svm-radius); }

.svm-history-list, .svm-family-list { background: var(--svm-card-bg); border-radius: var(--svm-radius); box-shadow: var(--svm-shadow); overflow: hidden; }
.svm-history-row { display:flex; align-items:center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--svm-border); font-size: 13px; }
.svm-history-row:last-child { border-bottom: none; }
.svm-history-row small { margin-left: auto; color: var(--svm-text-muted); }

.svm-family-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; box-shadow: none; background: transparent; }
.svm-family-chip { background: var(--svm-primary-light); color: var(--svm-primary-dark); padding: 6px 12px; border-radius: 999px; font-size: 13px; }

.svm-inline-form, .svm-profile-form { background: var(--svm-card-bg); border-radius: var(--svm-radius); padding: 16px; box-shadow: var(--svm-shadow); display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.svm-inline-form { flex-direction: row; flex-wrap: wrap; align-items: center; }
.svm-inline-form input { flex: 1; min-width: 120px; padding: 10px 12px; border: 1px solid var(--svm-border); border-radius: 8px; }
.svm-profile-form label { font-size: 13px; font-weight: 600; color: var(--svm-text-muted); }
.svm-profile-form input, .svm-profile-form select { display:block; width:100%; padding: 10px 12px; margin-top: 6px; border: 1px solid var(--svm-border); border-radius: 8px; }
.svm-hint { font-size: 12px; color: var(--svm-text-muted); margin-top: 10px; }

/* ---------------- Badges & statuses (shared) ---------------- */
.svm-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--svm-border); color: var(--svm-text-muted); text-transform: uppercase; letter-spacing: .3px; }
.svm-badge-guest { background: #dbeafe; color: #1d4ed8; }
.svm-badge-staff_recurring { background: #ede9fe; color: #6d28d9; }
.svm-badge-utility { background: #fef3c7; color: #b45309; }
.svm-badge-rented { background: #fee2e2; color: #b91c1c; }
.svm-badge-owner { background: #dcfce7; color: #15803d; }
.svm-badge-vacant { background: #e5e7eb; color: #4b5563; }

.svm-status { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.svm-status-pending { background: var(--svm-warn-light); color: var(--svm-warn); }
.svm-status-approved, .svm-status-completed, .svm-status-checked_in { background: var(--svm-success-light); color: var(--svm-success); }
.svm-status-rejected { background: var(--svm-danger-light); color: var(--svm-danger); }
.svm-status-come_down { background: #e0e7ff; color: #4338ca; }
.svm-status-partial { background: #fef3c7; color: #b45309; }

/* ---------------- Visitor waiting screen ---------------- */
.svm-wait-screen { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.svm-wait-card { background: var(--svm-card-bg); border-radius: var(--svm-radius); padding: 40px 30px; text-align: center; box-shadow: var(--svm-shadow); max-width: 380px; width: 100%; }
.svm-wait-spinner { width: 48px; height: 48px; border: 4px solid var(--svm-border); border-top-color: var(--svm-primary); border-radius: 50%; margin: 0 auto 20px; animation: svm-spin 1s linear infinite; }
@keyframes svm-spin { to { transform: rotate(360deg); } }
.svm-wait-flat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--svm-border); }
.svm-wait-note { font-size: 13px; color: var(--svm-text-muted); margin-top: 16px; }

/* ---------------- Committee Dashboard ---------------- */
.svm-committee-dashboard { max-width: 1100px; }

.svm-cd-tabs { display: flex; gap: 6px; margin: 20px 0; overflow-x: auto; border-bottom: 2px solid var(--svm-border); }
.svm-cd-tab { border: none; background: transparent; padding: 12px 18px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--svm-text-muted); border-bottom: 3px solid transparent; white-space: nowrap; }
.svm-cd-tab.active { color: var(--svm-primary); border-bottom-color: var(--svm-primary); }

.svm-cd-panel { padding-top: 10px; }

.svm-form-card { background: var(--svm-card-bg); border-radius: var(--svm-radius); padding: 20px; box-shadow: var(--svm-shadow); margin-bottom: 20px; }
.svm-form-card h3, .svm-form-card h4 { margin-top: 0; }
.svm-form-card h4 { margin-top: 18px; margin-bottom: 6px; font-size: 14px; color: var(--svm-text-muted); text-transform: uppercase; letter-spacing: .3px; }

.svm-form-actions { display: flex; gap: 10px; margin-top: 10px; }

.svm-cd-table-wrap { overflow-x: auto; background: var(--svm-card-bg); border-radius: var(--svm-radius); box-shadow: var(--svm-shadow); }
.svm-cd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.svm-cd-table th { text-align: left; padding: 12px 14px; background: var(--svm-bg); color: var(--svm-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--svm-border); }
.svm-cd-table td { padding: 12px 14px; border-bottom: 1px solid var(--svm-border); vertical-align: top; }
.svm-cd-table tr:last-child td { border-bottom: none; }

.svm-search-form { margin: 14px 0; }
.svm-search-form input { width: 100%; max-width: 320px; padding: 10px 14px; border: 1px solid var(--svm-border); border-radius: 8px; }

.svm-approver-tag { font-weight: 600; color: var(--svm-primary); font-size: 12px; }

/* ---------------- Mobile responsive (≤680px) ---------------- */
@media (max-width: 680px) {
	.svm-app { padding: 14px; }
	.svm-type-tabs { flex-wrap: nowrap; }
	.svm-type-tab { font-size: 12px; padding: 12px 6px; }
	.svm-visitor-cards { grid-template-columns: 1fr; }
	.svm-dash-header { flex-direction: column; gap: 10px; }
	.svm-inline-form { flex-direction: column; align-items: stretch; }
	.svm-visitor-actions { flex-direction: column; }
	.svm-visitor-actions button { width: 100%; }
	.svm-camera-frame { max-width: 100%; }
	.svm-cd-tabs { gap: 2px; }
	.svm-cd-tab { padding: 10px 12px; font-size: 12px; }
	.svm-cd-table th, .svm-cd-table td { padding: 8px 10px; font-size: 12px; }
	.svm-form-actions { flex-direction: column; }
	.svm-form-actions button { width: 100%; }
}