/* SnapCity Connector — admin styles (LatePoint aesthetic, MyCityGov palette)
   Navy #0B1D3A · Blue #1258C2 · Gold #E8A838 · Green #2ECC71 */

.scc-wrap {
	max-width: 56rem;
	font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.scc-title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #0B1D3A;
	margin-bottom: 0.25rem;
}

.scc-subtitle {
	color: #5B6678;
	font-size: 0.9375rem;
	margin-top: 0;
	margin-bottom: 1.5rem;
}

/* Cards */
.scc-card {
	background-color: #FFFFFF;
	color: #1A2233;
	border: 0.0625rem solid #E2E7EF;
	border-radius: 0.875rem;
	padding: 1.5rem;
	margin-bottom: 1.25rem;
	box-shadow: 0 0.0625rem 0.1875rem rgba(11, 29, 58, 0.06);
}

.scc-card-title {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #5B6678;
	margin: 0 0 1rem;
}

/* Fields */
.scc-field {
	margin-bottom: 1rem;
}

.scc-field label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: #1A2233;
	margin-bottom: 0.375rem;
}

.scc-field input[type="text"],
.scc-field input[type="url"],
.scc-field input[type="password"],
.scc-field input[type="number"],
.scc-field textarea {
	width: 100%;
	max-width: 100%;
	background-color: #FFFFFF;
	color: #1A2233;
	border: 0.0625rem solid #D8DEE8;
	border-radius: 0.625rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
}

.scc-field input:focus,
.scc-field textarea:focus {
	background-color: #FFFFFF;
	color: #1A2233;
	border-color: #1258C2;
	box-shadow: 0 0 0 0.125rem rgba(18, 88, 194, 0.15);
	outline: none;
}

.scc-field-row {
	display: flex;
	gap: 1rem;
}

.scc-field-row > div {
	flex: 1;
}

.scc-help {
	color: #5B6678;
	font-size: 0.8125rem;
	margin: 0.375rem 0 0;
}

/* Buttons — bg AND text declared together in EVERY state; AAA pairs;
   LVHA pseudo-class order. */
.scc-btn {
	display: inline-block;
	border-radius: 62.4375rem; /* pill */
	padding: 0.625rem 1.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	border: 0.125rem solid transparent;
}

.scc-btn-primary {
	background-color: #0B1D3A;
	color: #FFFFFF;
	border-color: #0B1D3A;
}
.scc-btn-primary:link {
	background-color: #0B1D3A;
	color: #FFFFFF;
}
.scc-btn-primary:visited {
	background-color: #0B1D3A;
	color: #FFFFFF;
}
.scc-btn-primary:hover {
	background-color: #1258C2;
	color: #FFFFFF;
	border-color: #1258C2;
}
.scc-btn-primary:focus {
	background-color: #1258C2;
	color: #FFFFFF;
	border-color: #0B1D3A;
	outline: 0.125rem solid #0B1D3A;
	outline-offset: 0.125rem;
}
.scc-btn-primary:active {
	background-color: #0B1D3A;
	color: #FFFFFF;
}
.scc-btn-primary:disabled {
	background-color: #D8DEE8;
	color: #1A2233;
	border-color: #D8DEE8;
	cursor: not-allowed;
}

.scc-btn-outline {
	background-color: #FFFFFF;
	color: #0B1D3A;
	border-color: #0B1D3A;
}
.scc-btn-outline:link {
	background-color: #FFFFFF;
	color: #0B1D3A;
}
.scc-btn-outline:visited {
	background-color: #FFFFFF;
	color: #0B1D3A;
}
.scc-btn-outline:hover {
	background-color: #0B1D3A;
	color: #FFFFFF;
}
.scc-btn-outline:focus {
	background-color: #0B1D3A;
	color: #FFFFFF;
	outline: 0.125rem solid #1258C2;
	outline-offset: 0.125rem;
}
.scc-btn-outline:active {
	background-color: #0B1D3A;
	color: #FFFFFF;
}
.scc-btn-outline:disabled {
	background-color: #F5F7FA;
	color: #5B6678;
	border-color: #D8DEE8;
	cursor: not-allowed;
}

.scc-actions {
	margin: 1.5rem 0;
}

.scc-actions-secondary {
	display: flex;
	gap: 0.75rem;
}

/* Notices */
.scc-notice {
	border-radius: 0.625rem;
	padding: 0.875rem 1.25rem;
	margin-bottom: 1.25rem;
	font-size: 0.9375rem;
	font-weight: 500;
}

.scc-notice-success {
	background-color: #0B1D3A;
	color: #FFFFFF;
	border-left: 0.375rem solid #2ECC71;
}

.scc-notice-error {
	background-color: #0B1D3A;
	color: #FFFFFF;
	border-left: 0.375rem solid #E8A838;
}

/* Sync log table */
.scc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.scc-table th {
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.75rem;
	color: #5B6678;
	padding: 0.625rem 0.75rem;
	border-bottom: 0.125rem solid #E2E7EF;
}

.scc-table td {
	padding: 0.625rem 0.75rem;
	border-bottom: 0.0625rem solid #EEF1F6;
	color: #1A2233;
	vertical-align: top;
}

.scc-badge {
	display: inline-block;
	border-radius: 62.4375rem;
	padding: 0.125rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
}

.scc-badge-success {
	background-color: #0B1D3A;
	color: #FFFFFF;
}

.scc-badge-error {
	background-color: #7A1F1F;
	color: #FFFFFF;
}

/* Frontend manager tabs */
.scc-tabs {
	display: flex;
	gap: 0.25rem;
	border-bottom: 0.125rem solid #E2E7EF;
	margin-bottom: 1.25rem;
}
.scc-tab {
	display: inline-block;
	background-color: transparent;
	color: #5B6678;
	padding: 0.625rem 1.125rem;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	border-bottom: 0.1875rem solid transparent;
}
.scc-tab:link    { background-color: transparent; color: #5B6678; }
.scc-tab:visited { background-color: transparent; color: #5B6678; }
.scc-tab:hover   { background-color: transparent; color: #0B1D3A; border-bottom-color: #D8DEE8; }
.scc-tab:active  { background-color: transparent; color: #0B1D3A; }
.scc-tab-active,
.scc-tab-active:link,
.scc-tab-active:visited {
	background-color: transparent;
	color: #1258C2;
	border-bottom-color: #1258C2;
}
.scc-frontend select {
	width: 100%;
	background-color: #FFFFFF;
	color: #1A2233;
	border: 0.0625rem solid #D8DEE8;
	border-radius: 0.625rem;
	padding: 0.625rem 0.875rem;
	font-size: 0.9375rem;
}

/* App Content checklists */
.scc-checklist {
	max-height: 20rem;
	overflow-y: auto;
	border: 0.0625rem solid #E2E7EF;
	border-radius: 0.625rem;
	padding: 0.5rem;
}
.scc-check-row {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.625rem;
	border-radius: 0.5rem;
	font-size: 0.9375rem;
	color: #1A2233;
	cursor: pointer;
}
.scc-check-row:hover { background-color: #F5F7FA; color: #1A2233; }
.scc-check-date { margin-left: auto; color: #5B6678; font-size: 0.8125rem; }

/* Home tile editor */
.scc-tile-row {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-bottom: 0.625rem;
	flex-wrap: wrap;
}
.scc-tile-order { width: 4rem; }
.scc-tile-icon  { width: 4rem; text-align: center; }
.scc-tile-label { flex: 1 1 10rem; }
.scc-tile-type, .scc-tile-screen { flex: 0 1 12rem; }
.scc-tile-url   { flex: 1 1 14rem; }
.scc-tile-row input, .scc-tile-row select {
	background-color: #FFFFFF;
	color: #1A2233;
	border: 0.0625rem solid #D8DEE8;
	border-radius: 0.625rem;
	padding: 0.5rem 0.625rem;
	font-size: 0.875rem;
}

/* Icon legend */
.scc-icon-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 1rem;
}
.scc-icon-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background-color: #F5F7FA;
	color: #0B1D3A;
	border: 0.0625rem solid #E2E7EF;
	border-radius: 62.4375rem;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
}
.scc-icon-chip svg { color: #1258C2; }
.scc-tile-icon { flex: 0 1 11rem; }

/* Home editor + live phone preview */
.scc-home-layout {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	flex-wrap: wrap;
}
.scc-home-editor { flex: 1 1 34rem; min-width: 0; }
.scc-home-preview { flex: 0 0 18rem; position: sticky; top: 2rem; }

.scc-phone {
	background-color: #FFFFFF;
	border: 0.375rem solid #1A2233;
	border-radius: 1.75rem;
	overflow: hidden;
}
.scc-phone-banner {
	background-color: #0B1D3A;
	color: #FFFFFF;
	text-align: center;
	padding: 1rem 0.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}
.scc-ph-logo { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; }
.scc-ph-city { font-weight: 700; font-size: 0.9375rem; color: #FFFFFF; }
.scc-ph-switch { color: #E8A838; font-size: 0.6875rem; }
.scc-phone-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	padding: 0.75rem;
	background-color: #F5F7FA;
	min-height: 14rem;
}
.scc-ph-tile {
	background-color: #FFFFFF;
	border-radius: 0.75rem;
	padding: 0.875rem 0.375rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	text-align: center;
	font-size: 0.6875rem;
	font-weight: 600;
	box-shadow: 0 0.0625rem 0.1875rem rgba(11, 29, 58, 0.08);
}
.scc-ph-empty { grid-column: 1 / -1; text-align: center; color: #5B6678; font-size: 0.8125rem; padding: 2rem 1rem; }
.scc-phone-tabbar {
	display: flex;
	justify-content: space-around;
	border-top: 0.0625rem solid #D8DEE8;
	padding: 0.5rem 0;
	background-color: #FFFFFF;
	font-size: 0.6875rem;
	color: #5B6678;
	font-weight: 600;
}

.scc-move-group { display: flex; flex-direction: column; gap: 0.125rem; }
.scc-move {
	background-color: #FFFFFF;
	color: #0B1D3A;
	border: 0.0625rem solid #D8DEE8;
	border-radius: 0.375rem;
	padding: 0.125rem 0.25rem;
	cursor: pointer;
	line-height: 0;
}
.scc-move:hover  { background-color: #0B1D3A; color: #FFFFFF; }
.scc-move:focus  { background-color: #0B1D3A; color: #FFFFFF; outline: 0.125rem solid #1258C2; outline-offset: 0.0625rem; }
.scc-move:active { background-color: #0B1D3A; color: #FFFFFF; }
.scc-tile-page { flex: 0 1 12rem; }

/* ---- Live preview v2 (matches app v0.3.3) ---- */
.scc2-banner {
	color: #fff;
	text-align: center;
	padding: 0.875rem 0.75rem 1.125rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.22);
	position: relative;
	z-index: 2;
}
.scc2-seal {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
	margin-bottom: 0.25rem;
}
.scc2-seal img { width: 4rem; height: 4rem; border-radius: 50%; object-fit: cover; }
.scc2-widelogo {
	display: block;
	background: #fff;
	border-radius: 12px;
	padding: 8px 14px;
	margin: 0 auto 8px;
	max-width: 85%;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.scc2-widelogo img { display: block; width: 100%; height: 42px; object-fit: contain; }
.scc2-city { font-weight: 800; font-size: 0.9375rem; line-height: 1.2; }
.scc2-tagline { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.scc2-pill {
	margin-top: 0.25rem;
	font-size: 0.625rem;
	font-weight: 600;
	color: #E8B54D;
	border: 0.0625rem solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 0.125rem 0.625rem;
}
.scc2-body { position: relative; background: #F0F2F5; min-height: 15rem; overflow: hidden; }
.scc2-bgphoto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.35;
}
.scc2-watermark {
	position: absolute;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	width: 75%;
	opacity: 0.06;
}
.scc2-scroll { position: relative; padding: 0.75rem; }
.scc2-hero {
	width: 100%;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 0.75rem;
	margin-bottom: 0.625rem;
	display: block;
}
.scc2-grid { display: grid; gap: 0.5rem; }
.scc2-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scc2-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scc2-tile {
	background: #fff;
	border-radius: 0.75rem;
	padding: 0.75rem 0.25rem 0.625rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.375rem;
	text-align: center;
	box-shadow: 0 0.125rem 0.375rem rgba(16, 32, 60, 0.08);
}
.scc2-icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scc2-label { font-size: 0.625rem; font-weight: 700; line-height: 1.2; }
.scc2-tabbar {
	display: flex;
	justify-content: space-around;
	border-top: 0.0625rem solid #D8DEE8;
	padding: 0.5rem 0 0.625rem;
	background: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	color: #9AA5B5;
}

/* ---- Media pickers & color swatches ---- */
.scc-media-field { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.scc-media-thumb {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 0.5rem;
	object-fit: cover;
	border: 0.0625rem solid #D8DEE8;
	background: #F5F7FA;
}
.scc-media-btns { display: flex; gap: 0.5rem; }
.scc-color-combo { display: flex; align-items: center; gap: 0.5rem; }
.scc-color-swatch {
	width: 2.5rem;
	height: 2.35rem;
	padding: 0.125rem;
	border: 0.0625rem solid #D8DEE8;
	border-radius: 0.5rem;
	background: #fff;
	cursor: pointer;
}
.scc-color-combo input[type="text"] { flex: 1; }
.scc2-fab {
	position: absolute;
	right: 0.625rem;
	bottom: 0.625rem;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.3);
}