/*
------------------------------------------------
Training Log UI System
------------------------------------------------
*/

:root {
--tl-color-text: #302e29;
--tl-color-text-secondary: #746f64;

--tl-color-border: #cfc7b7;
--tl-color-border-soft: #e1dccf;

--tl-color-background: #f1efe8;
--tl-color-surface: #fbfaf6;

--tl-color-primary: #655f4d;
--tl-color-primary-hover: #4a463a;

--tl-color-dark: #302e29;
--tl-color-dark-hover: #1f1e1a;

--tl-color-success: #596653;
--tl-color-success-bg: #edf0e9;

--tl-color-warning: #8a6d3d;
--tl-color-warning-bg: #f5efe2;

--tl-color-danger: #865550;
--tl-color-danger-bg: #f3e9e6;

	--tl-radius: 4px;

	--tl-content-width: 100%;
	--tl-page-padding: 16px;
}



/*
------------------------------------------------
Application
------------------------------------------------
*/

html,
body {
	background: var(--tl-color-background) !important;
	color: var(--tl-color-text);
}


.tl-app {
	width: 100%;
	margin: 0 auto;

	overflow-x: clip;
	
	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
}


/*
------------------------------------------------
Application Workspace
------------------------------------------------
*/

.tl-app-content {
	width: min(
		calc(100% - (var(--tl-page-padding) * 2)),
		var(--tl-content-width)
	);

	margin-inline: auto;
	padding: 20px 0 0 0;

	box-sizing: border-box;
}


.tl-app-content > * {
	width: 100%;
	margin-inline: 0;
}


.tl-app-content,
.tl-app-content > *,
.tl-form,
.tl-form-field,
.tl-form-section,
.tl-form fieldset {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}


.tl-app p {
	font-size: .875em;
}

/*
------------------------------------------------
Links
------------------------------------------------
*/

.tl-app a {
	color: var(--tl-color-primary);
}

.tl-app a:visited {
	color: var(--tl-color-primary);
}

.tl-app a:hover,
.tl-app a:focus {
	color: var(--tl-color-primary-hover);
}

/*
------------------------------------------------
Typography
------------------------------------------------
*/

.tl-app h1,
.tl-app h2,
.tl-app h3 {
	color: var(--tl-color-text);
}


.tl-app a {
	color: var(--tl-color-primary);
}


.tl-app a:hover {
	color: var(--tl-color-primary-hover);
}



/*
------------------------------------------------
Page Headers
------------------------------------------------
*/

.tl-list-header {
	margin: 0 0 20px;
}


.tl-list-header h1 {
	margin: 0;

	font-size: 1.5em;
	line-height: 1.2;
}



/*
------------------------------------------------
Buttons
------------------------------------------------
*/

.tl-app .button,
.tl-app button {
	font: inherit;
}


.tl-app .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;
	padding: 10px 16px;

	box-sizing: border-box;

	border: 0;
	border-radius: var(--tl-radius);

	background: var(--tl-color-dark);
	color: #fff;

	font-weight: 600;
	text-decoration: none;

	cursor: pointer;
}


.tl-app .button:visited {
	color: #fff;
}


.tl-app .button:hover {
	background: var(--tl-color-dark-hover);
	color: #fff;
}


.tl-app .button-primary {
	background: var(--tl-color-primary);
	color: #fff;
}


.tl-app .button-primary:hover {
	background: var(--tl-color-primary-hover);
	color: #fff;
}



.tl-list-controls .button-primary,
.tl-list-controls .button-primary:visited {
	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-primary);
	color: var(--tl-color-primary);
}

.tl-list-controls .button-primary:hover,
.tl-list-controls .button-primary:focus {
	background: rgba(37, 99, 166, .06);
	border-color: var(--tl-color-primary-hover);
	color: var(--tl-color-primary-hover);
}

.tl-app .tl-list-filter select {
	font-family: sans-serif !important;
}

/*
------------------------------------------------
Forms
------------------------------------------------
*/

.tl-form {
	display: grid;
	gap: 22px;

	width: 100%;
}



/*
------------------------------------------------
Form Sections
------------------------------------------------
*/

.tl-form-section {
	display: grid;
	gap: 18px;

	margin: 0;
	padding: 0;

	border: 0;
}


.tl-form-section + .tl-form-section {
	padding-top: 22px;

	border-top: 1px solid var(--tl-color-border-soft);
}


.tl-form-section-header {
	display: grid;
	gap: 4px;
}


.tl-form-section-header h2,
.tl-form-section-header h3 {
	margin: 0;

	font-size: 1em;
	line-height: 1.3;
}


.tl-form-section-header p {
	margin: 0;

	color: var(--tl-color-text-secondary);

	font-size: .8125em;
	line-height: 1.45;
}



/*
------------------------------------------------
Fields
------------------------------------------------
*/

.tl-form-field {
	display: grid;
	gap: 7px;

	margin: 0;
	padding: 0;

	border: 0;
}


.tl-form-field label,
.tl-form-field legend {
	margin: 0;
	padding: 0;

	color: var(--tl-color-text);

	font-size: .875em;
	font-weight: 600;
	line-height: 1.35;
}


.tl-form-field legend {
	margin-bottom: 2px;
}

.tl-form input[type="date"] {
	width: 100%;
	max-width: 100%;
	min-width: 0;

	box-sizing: border-box;

	-webkit-appearance: none;
	appearance: none;
}

/*
------------------------------------------------
Form Field Labels
------------------------------------------------
*/

.tl-form-field-label {
	margin: 0;
	padding: 0;

	color: var(--tl-color-text);

	font-size: .875em;
	font-weight: 600;
	line-height: 1.35;
}



/*
------------------------------------------------
Required Fields
------------------------------------------------
*/

.tl-form-required {
	color: var(--tl-color-danger);

	font-weight: 600;
}



/*
------------------------------------------------
Field Descriptions
------------------------------------------------
*/

.tl-form-description,
.tl-form-help {
	margin: 0;

	color: var(--tl-color-text-secondary);

	font-size: .75em;
	line-height: 1.45;
}



/*
------------------------------------------------
Inputs
------------------------------------------------
*/

.tl-form input[type="text"],
.tl-form input[type="email"],
.tl-form input[type="tel"],
.tl-form input[type="password"],
.tl-form input[type="date"],
.tl-form input[type="number"],
.tl-form input[type="url"],
.tl-form select,
.tl-form textarea {
	display: block;

	width: 100%;
	min-height: 48px;

	padding: 11px 13px;

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);

	color: var(--tl-color-text);

	font: inherit;
	font-size: 1em;
	line-height: 1.4;

	transition:
		border-color .15s ease,
		box-shadow .15s ease;
}


.tl-form select {
	min-height: 50px;
	padding: 12px 40px 12px 14px;

	background-color: var(--tl-color-surface);

	cursor: pointer;
}


.tl-form textarea {
	min-height: 150px;

	resize: vertical;
}


.tl-form input,
.tl-form select,
.tl-form textarea {
	max-width: 100%;
	min-width: 0;
}



/*
------------------------------------------------
Focus
------------------------------------------------
*/

.tl-form input:focus,
.tl-form select:focus,
.tl-form textarea:focus {
	outline: none;

	border-color: var(--tl-color-primary);

	box-shadow: 0 0 0 3px rgba(37, 99, 166, .12);
}



/*
------------------------------------------------
Disabled Fields
------------------------------------------------
*/

.tl-form input:disabled,
.tl-form select:disabled,
.tl-form textarea:disabled {
	background: var(--tl-color-background);
	color: var(--tl-color-text-secondary);

	cursor: not-allowed;
}



/*
------------------------------------------------
Checkbox / Radio Options
------------------------------------------------
*/

.tl-form-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}


.tl-form-option {
	position: relative;

	display: inline-flex;
	align-items: center;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	cursor: pointer;
}


.tl-form-option input[type="checkbox"],
.tl-form-option input[type="radio"] {
	position: absolute;

	width: 1px;
	height: 1px;
	margin: 0;

	opacity: 0;
	pointer-events: none;
}


.tl-form-option span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 42px;
	padding: 9px 15px;

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: 999px;

	color: var(--tl-color-text);

	font-size: .875em;
	font-weight: 600;
	line-height: 1.2;

	transition:
		background .15s ease,
		border-color .15s ease,
		color .15s ease;
}


.tl-form-option:hover span {
	border-color: var(--tl-color-primary);
}


.tl-form-option input[type="checkbox"]:checked + span,
.tl-form-option input[type="radio"]:checked + span {
	background: var(--tl-color-primary);
	border-color: var(--tl-color-primary);

	color: #fff;
}


.tl-form-option input[type="checkbox"]:focus-visible + span,
.tl-form-option input[type="radio"]:focus-visible + span {
	outline: 2px solid rgba(37, 99, 166, .25);
	outline-offset: 2px;
}



/*
------------------------------------------------
Quick Add / Secondary Form Panels
------------------------------------------------
*/

.tl-form details,
.tl-quick-add,
.tl-form-quick-add {
	margin-top: 6px;
}


.tl-form details > summary,
.tl-quick-add > summary,
.tl-form-quick-add > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	min-height: 36px;
	padding: 6px 9px;

	box-sizing: border-box;

	border-radius: var(--tl-radius);

	color: var(--tl-color-primary);

	font-size: .8125em;
	font-weight: 600;
	line-height: 1.2;

	cursor: pointer;
	list-style: none;
}


.tl-form details > summary::-webkit-details-marker,
.tl-quick-add > summary::-webkit-details-marker,
.tl-form-quick-add > summary::-webkit-details-marker {
	display: none;
}


.tl-form details > summary::before,
.tl-quick-add > summary::before,
.tl-form-quick-add > summary::before {
	content: "+";

	font-size: 1.1em;
	font-weight: 700;
	line-height: 1;
}


.tl-form details[open] > summary::before,
.tl-quick-add[open] > summary::before,
.tl-form-quick-add[open] > summary::before {
	content: "−";
}


.tl-form details > summary:hover,
.tl-form details > summary:focus-visible,
.tl-quick-add > summary:hover,
.tl-quick-add > summary:focus-visible,
.tl-form-quick-add > summary:hover,
.tl-form-quick-add > summary:focus-visible {
	background: rgba(37, 99, 166, .06);

	color: var(--tl-color-primary-hover);

	outline: none;
}


/*
 * Expanded quick-add content.
 *
 * The current Create Session markup places fields directly
 * inside <details>, so this styles the nested form area
 * without requiring additional wrapper markup.
 */

.tl-form details[open],
.tl-quick-add[open],
.tl-form-quick-add[open] {
	display: grid;
	gap: 14px;

	padding: 12px 16px 16px;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);

	box-shadow:
		0 1px 2px rgba(0, 0, 0, .03),
		0 3px 8px rgba(0, 0, 0, .04);
}


.tl-form details[open] > summary,
.tl-quick-add[open] > summary,
.tl-form-quick-add[open] > summary {
	margin: -4px 0 0 -8px;
}


.tl-form-quick-add-content,
.tl-quick-add-panel {
	display: grid;
	gap: 14px;
}



//*
------------------------------------------------
File Inputs
------------------------------------------------
*/

.tl-form input[type="file"] {
	display: block;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	box-sizing: border-box;

	font: inherit;
	font-size: .8125em;

	overflow: hidden;
}



/*
------------------------------------------------
Form Actions
------------------------------------------------
*/

.tl-form-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;

	margin-top: 4px;
}


.tl-form-actions .button,
.tl-form-actions button {
	width: 100%;
	min-height: 48px;
}


.tl-form button.is-submitting,
.tl-form .button.is-submitting {
	pointer-events: none;
	cursor: wait;
	opacity: .78;
}

.tl-form button.is-submitting::before,
.tl-form .button.is-submitting::before {
	content: "";

	width: 14px;
	height: 14px;
	margin-right: 8px;

	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;

	animation: tl-button-spin .7s linear infinite;
}

@keyframes tl-button-spin {
	to {
		transform: rotate(360deg);
	}
}



/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	.tl-form {
		gap: 24px;
	}


	.tl-form-section {
		gap: 20px;
	}


	.tl-form-actions {
		flex-direction: row;
		align-items: center;
	}


	.tl-form-actions .button,
	.tl-form-actions button {
		width: auto;
		min-width: 140px;
	}

}


/*
------------------------------------------------
Notices
------------------------------------------------
*/

.tl-notice {
	margin: 0 0 18px;
	padding: 12px 14px;

	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);

	background: var(--tl-color-surface);
}


/* Keep notices compact when they live inside nested quick-add panels. */
.tl-quick-add .tl-notice,
.tl-form-quick-add .tl-notice,
.tl-quick-add-panel .tl-notice {
	margin-bottom: 10px;
}


.tl-notice p:first-child {
	margin-top: 0;
}


.tl-notice p:last-child {
	margin-bottom: 0;
}


.tl-notice-success {
	border-color: var(--tl-color-success);
	background: var(--tl-color-success-bg);
}


.tl-notice-error {
	border-color: var(--tl-color-danger);
	background: var(--tl-color-danger-bg);
}



/*
------------------------------------------------
Empty States
------------------------------------------------
*/

.tl-list-empty {
	padding: 24px;

	border: 1px solid var(--tl-color-border-soft);
	border-radius: var(--tl-radius);

	background: var(--tl-color-surface);
}


.tl-list-empty p {
	margin: 0;
}



/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	:root {
		--tl-page-padding: 24px;
	}


	.tl-list-header {
		margin-bottom: 24px;
	}


	.tl-list-header h1 {
		font-size: 1.625em;
	}
	
	.tl-list-controls {
	margin-bottom: 18px;
}

}

/*
------------------------------------------------
Dog Photo Field
------------------------------------------------
*/

.tl-dog-photo-field {
	gap: 10px;
}


.tl-dog-photo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 120px;
	height: 120px;

	overflow: hidden;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);
}


.tl-dog-photo-placeholder img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: contain;
}

/*
------------------------------------------------
List Controls
------------------------------------------------
*/

.tl-list-controls {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 10px;

	margin-bottom: 16px;
}


.tl-list-controls .button {
	flex: 0 0 auto;
}


.tl-list-filter {
	flex: 0 0 auto;

	margin: 0;
}


.tl-list-filter select {
	height: 44px;
	min-width: 110px;

	padding: 0 34px 0 12px;

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);

	color: var(--tl-color-text);

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
	font-size: .875em;
	font-weight: 600;
}

/*
------------------------------------------------
App Footer
------------------------------------------------
*/

.tl-app-footer {
	width: 100%;

	margin-top: 40px;
	padding: 20px var(--tl-page-padding);
}


.tl-app-footer-inner {
	width: 100%;
	max-width: var(--tl-content-width);

	margin-inline: auto;

	text-align: center;
}


.tl-app-footer a,
.tl-app-footer a:visited,
.tl-app-footer a:hover,
.tl-app-footer a:focus {
	color: var(--tl-color-text-secondary);

	font-size: .75em;
	font-weight: 400;
	text-decoration: none;
}