/* SureVisit Demo — shared styles, scoped under .svhd-scope so nothing leaks into the rest of the theme */

/*
 * The site theme loads a classic Meyer-style CSS reset that sets
 * `div, p, h1, ... { border: 0 }`. That resets border-style to `none` on
 * every div at (0,0,1) specificity — higher than Tailwind's own preflight
 * `* { border-style: solid }` at (0,0,0), so it wins. Tailwind's border-width/
 * border-color utilities (border-2, border-black, etc.) never set border-style
 * themselves, so any div using them renders with a 0px/invisible border even
 * though the width and color "won." This single rule restores border-style
 * at high enough specificity to beat the theme's reset, for every div inside
 * the demo. Safe to apply broadly: divs with no border-width utility still
 * render no border, since border-width stays at 0 from the reset either way.
 */
.svhd-scope div {
	border-style: solid;
}

.svhd-scope .svhd-nav-shadow {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.svhd-scope .svhd-detail-box {
	border: 1px solid #e2e8f0;
	border-radius: 0.5rem;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.svhd-scope .svhd-form-input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 2px solid #000000;
	border-radius: 0.5rem;
	outline: none;
	transition: border-color 0.2s;
	min-height: 44px;
	font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
}

.svhd-scope .svhd-form-input:focus {
	border-color: #006d77;
	box-shadow: 0 0 0 2px rgba(0, 109, 119, 0.2);
}

.svhd-scope .svhd-radio-custom:checked + label .svhd-radio-circle {
	border-color: #006d77;
	background-color: #006d77;
	box-shadow: inset 0 0 0 3px #ffffff;
}

.svhd-scope .svhd-radio-custom:focus-visible + label .svhd-radio-circle {
	outline: 3px solid #006d77;
	outline-offset: 2px;
}

.svhd-scope .svhd-picker-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border: 1px solid #000000;
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 500;
	color: #000000;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
	width: 100%;
	min-height: 44px;
}

.svhd-scope .svhd-picker-button:hover {
	border-color: #006d77;
	background-color: #f0fdfa;
}

.svhd-scope .svhd-picker-button.active {
	background-color: #e6f3f4;
	border-color: #006d77;
	color: #006d77;
	font-weight: 600;
	box-shadow: 0 0 0 1px #006d77;
}

.svhd-scope .svhd-picker-button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Same unlayered-vs-layered conflict as the grid .hidden fix below — .svhd-picker-button's
   `display: inline-flex` (unlayered) beats Tailwind's `.hidden` (layered) unless restated here. */
.svhd-scope .svhd-picker-button.hidden {
	display: none;
}

/* Year/Month selector pills — sized to their content, not stretched to fill the row like the date/time grid buttons. */
.svhd-scope .svhd-picker-button-compact {
	width: auto;
	font-size: 14px;
	padding: 10px 18px;
}

.svhd-scope .svhd-grid-4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

@media (min-width: 480px) {
	.svhd-scope .svhd-grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.svhd-scope .svhd-grid-6 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

@media (min-width: 480px) {
	.svhd-scope .svhd-grid-6 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 768px) {
	.svhd-scope .svhd-grid-6 {
		grid-template-columns: repeat(6, 1fr);
	}
}

/*
 * Tailwind's `.hidden` utility lives inside its own `@layer utilities` block, so per CSS
 * cascade-layer rules it loses to ANY unlayered CSS regardless of specificity — including our
 * own demo.css rules above. An element carrying both `svhd-grid-4`/`svhd-grid-6` (display: grid,
 * unlayered, always wins) and `hidden` (display: none, layered, always loses) stays visible.
 * These rules restore the hide, at higher specificity than the plain grid rules, within our own
 * unlayered stylesheet where normal specificity comparison applies.
 */
.svhd-scope .svhd-grid-4.hidden,
.svhd-scope .svhd-grid-6.hidden {
	display: none;
}

.svhd-scope ::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

.svhd-scope ::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}

.svhd-scope ::-webkit-scrollbar-track {
	background: transparent;
}

.svhd-scope .svhd-status-select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 14px;
	padding-right: 28px;
	min-height: 32px;
}

.svhd-scope .svhd-accordion-row td {
	border-bottom: 1px solid #e2e8f0;
}

.svhd-scope .svhd-accordion-row:last-child td {
	border-bottom: none;
}

.svhd-scope .svhd-content-card {
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 1rem;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

@media (min-width: 640px) {
	.svhd-scope .svhd-content-card {
		padding: 2rem;
	}
}

.svhd-scope .svhd-data-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #000000;
	margin-bottom: 0.25rem;
	display: block;
}

.svhd-scope .svhd-data-value {
	font-size: 0.95rem;
	font-weight: 600;
	color: #000000;
}

.svhd-scope .svhd-section-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: #000000;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.svhd-scope .svhd-wcag-input,
.svhd-scope .svhd-wcag-textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 8px;
	border: 2px solid #000000;
	outline: none;
	transition: border-color 0.15s ease-in-out;
	background-color: #ffffff;
	color: #000000;
	font-size: 16px;
}

.svhd-scope .svhd-wcag-textarea {
	min-height: 120px;
	resize: vertical;
}

.svhd-scope .svhd-wcag-input:focus,
.svhd-scope .svhd-wcag-textarea:focus {
	border-color: #006d77;
	box-shadow: 0 0 0 1px #006d77;
}

.svhd-scope a:focus-visible,
.svhd-scope button:focus-visible,
.svhd-scope input:focus-visible,
.svhd-scope select:focus-visible {
	outline: 3px solid #006d77;
	outline-offset: 2px;
}