:root {
	--sl-input-required-content: "";

	/* Colours from Refactoring UI palette 17 (p98) */

	/* Pink (Vivid) */
	--pink-1000: #620042;
	--pink-900: #870557;
	--pink-800: #A30664;
	--pink-700: #BC0A6F;
	--pink-600: #DA127D;
	--pink-500: #E8368F;
	--pink-400: #F364A2;
	--pink-300: #FF8CBA;
	--pink-200: #FFB8D2;
	--pink-100: #FFE3EC;

	/* Purple (Vivid) */
	--purple-1000: #44056E;
	--purple-900: #580A94;
	--purple-800: #690CB0;
	--purple-700: #7A0ECC;
	--purple-600: #8719E0;
	--purple-500: #9446ED;
	--purple-400: #A368FC;
	--purple-300: #B990FF;
	--purple-200: #DAC4FF;
	--purple-100: #F2EBFE;

	/* Cyan (vivid) */
	--cyan-1000: #05606E;
	--cyan-900: #07818F;
	--cyan-800: #099AA4;
	--cyan-700: #0FB5BA;
	--cyan-600: #1CD4D4;
	--cyan-500: #3AE7E1;
	--cyan-400: #62F4EB;
	--cyan-300: #92FDF2;
	--cyan-200: #C1FEF6;
	--cyan-100: #E1FCF8;
	
	/* Yellow (Vivid) */
	--yellow-1000: #8D2B0B;
	--yellow-900: #B44D12;
	--yellow-800: #CB6E17;
	--yellow-700: #DE911D;
	--yellow-600: #F0B429;
	--yellow-500: #F7C948;
	--yellow-400: #FADB5F; 
	--yellow-300: #FCE588;
	--yellow-200: #FFF3C4;
	--yellow-100: #FFFBEA;

	/* Red (Vivid) */
	--red-1000: #610316;
	--red-900: #8A041A;
	--red-800: #AB091E;
	--red-700: #CF1124;
	--red-600: #E12D39;
	--red-500: #EF4E4E;
	--red-400: #F86A6A;
	--red-300: #FF9B9B;
	--red-200: #FFBDBD;
	--red-100: #FFE3E3;

	/* Cool grey */
	--grey-1000: #1F2933;
	--grey-900: #323F4B;
	--grey-800: #3E4C59;
	--grey-700: #52606D;
	--grey-600: #616E7C;
	--grey-500: #7B8794;
	--grey-400: #9AA5B1;
	--grey-300: #CBD2D9;
	--grey-200: #E4E7EB;
	--grey-100: #F5F7FA;


	--sl-color-primary-50: var(--pink-100);
	--sl-color-primary-100: var(--pink-100);
	--sl-color-primary-200: var(--pink-200);
	--sl-color-primary-300: var(--pink-300);
	--sl-color-primary-400: var(--pink-400);
	--sl-color-primary-500: var(--pink-500);
	--sl-color-primary-600: var(--pink-600);
	--sl-color-primary-700: var(--pink-700);
	--sl-color-primary-800: var(--pink-800);
	--sl-color-primary-900: var(--pink-900);
	--sl-color-primary-950: var(--pink-1000);

	--primary-color: var(--pink-600);
	--primary-color-light: #FEF6FA;
	--secondary-color: var(--pink-400);
	--error-red: var(--sl-color-danger-800);
	--supporting-peach: #FFF0E0;
	--supporting-cyan: var(--cyan-100);
	--delete: var(--sl-color-danger-600);

	/* Sizes 4 8 12 16 24 48 64 96 128 192 256 384 512 640 768 */

	/* Better shadows (from Refactoring UI) */
	--sl-shadow-x-small: 	0 1px 3px rgba(0,0,0, .12), 	0 1px 2px rgba(0,0,0, .24);
	--sl-shadow-small: 		0 3px 6px rgba(0,0,0, .15), 	0 2px 4px rgba(0,0,0, .12);
	--sl-shadow-medium: 	0 10px 20px rgba(0,0,0, .15), 	0 3px 6px rgba(0,0,0, .10);
	--sl-shadow-large: 		0 15px 25px rgba(0,0,0, .15), 	0 5px 10px rgba(0,0,0, .05);
	--sl-shadow-x-large: 	0 20px 40px rgba(0,0,0, .2);

}

:not(:defined) {
	visibility: hidden;
}

body, textarea, h1, h2, h3 {
	font-size: 16px;
}
body {
	font-family: var(--sl-font-sans);
	margin: 0px;
	/* background-color: #f3ebd8; */
	background-color: var(--grey-100);
	color: var(--grey-1000);
}
#body {
	margin: var(--sl-spacing-2x-large) auto;
    max-width: 600px;
	padding: 0px var(--sl-spacing-small);
}

header sl-button::part(base) {
	border: none;
}

.giant-emoji {
	font-size: 8em;
}
.empty-state-emoji {
	/* filter: grayscale(80%) contrast(0.5) brightness(1.5); */
}
.page-empty-state {
	top: 100px;
    position: relative;
    text-align: center;
}

h1, h2, h3 { 
	margin: 0px;
	padding: 0px;
	/* Vertically centre icons and text */
	display: flex;
	align-items: center;
	font-weight: normal;
}
/* .heading {
	font-weight: 500;
} */
.heading.title { 
	font-size: var(--sl-font-size-2x-large);
	margin-bottom: var(--sl-spacing-large);
}
.heading.large { 
	font-size: var(--sl-font-size-x-large);
	margin-bottom: var(--sl-spacing-medium);
}
.heading.medium { 
	font-size: var(--sl-font-size-large);
	margin-bottom: var(--sl-spacing-small);
}
.heading.p {
    margin-bottom: var(--sl-spacing-small);
}
.heading.small-caps {
	font-size: var(--sl-font-size-small);
	margin-bottom: var(--sl-spacing-small);
	color: var(--sl-color-neutral-500);
	text-transform: uppercase;
}


header {
	background-color: var(--primary-color);
	/* box-shadow: var(--sl-shadow-x-small); */
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#header-balance, #header-main-content {
	padding: var(--sl-spacing-small);
}
#header-main-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header-bar-title {
    font-weight: 600;
	color: white;
}
@media screen and (min-width: 600px) {
	#header-bar-title {
		font-weight: 500;
		font-size: var(--sl-font-size-large);
	}
}

#page-actions {
	display: flex;
	gap: var(--sl-spacing-2x-small);
}

sl-alert[variant="primary"]::part(base) {
    background-color: var(--sl-color-blue-50);
    border-top-color: var(--sl-color-blue-400);
}
sl-alert[variant="primary"]::part(icon) {
    color: var(--sl-color-blue-400);
}
sl-alert .action-row {
	margin-top: var(--sl-spacing-small);
}

sl-alert::part(base) {
	align-items: flex-start;
}
sl-alert::part(icon) {
	margin-top: 24px;
}
sl-alert::part(close-button) {
	position: relative;
    right: -8px;
	top: 8px;
}

.well {
	background-color: var(--grey-100);
    padding: 0px var(--sl-spacing-medium);
    border-radius: 4px;
    font-size: var(--sl-font-size-small);
}

sl-button:not([variant='text'])::part(base) {
    box-shadow: var(--sl-shadow-x-small);
}

.readonly-field-value {
	/* Used on ideas.html when adding donations from recipients */
	margin-top: 4px; 
	font-size: var(--sl-font-size-large); 
	font-size: large;
}

.field-unit {
	/* This is our equivelant of bootstrap's grey blocks inside fields */
	font-size: var(--sl-font-size-small);
	color: var(--grey-500);
}


.basic-file-input-field {
	height: auto;
    padding: 10px;
	background-color: white;
}


/***
 * Hide labels for header buttons on small screens
 */
label {
	font-size: var(--sl-input-label-font-size-medium);
}
.size-label.short,
.size-label.long {
	display: none;
}
header sl-button::part(label) {
	padding: 0px;
	padding-left: 12px;
}
#more-actions-button::part(label) {
	padding-right: 12px;
}
@media screen and (min-width: 450px) {
	header sl-button:not(#more-actions-button)::part(label) {
		padding: 0 var(--sl-spacing-medium);
	}
	#more-actions-button::part(label) {
		padding: 0 var(--sl-spacing-medium);
	}

}
@media screen and (min-width: 450px) and (max-width: 550px) {
	.size-label.short {
		display: inline;
	}
}
@media screen and (min-width: 550px) {
	.size-label.long {
		display: inline;
	}
}
/***/


#menu-item-logged-in-text {
	background-color: var(--grey-100);
	padding: 12px 30px;
    margin-bottom: -8px;
}
#action-button-date-menu-item {
	padding: 0px 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sl-spacing-small);
}
#more-actions-menu::part(base) {
	min-width: 250px;
}

#logout-menu-item::part(prefix) {
	align-items: flex-start;
    margin-top: 6px;
}

sl-menu a {
	text-decoration: none;
}

sl-menu-item.delete::part(base) {
	color: var(--delete);
}

/* sl-button:not([variant='text'])::part(base) {
	box-shadow: var(--sl-shadow-x-small);
} */
sl-button[variant='text'].lone::part(label) {
	padding-left: 6px;
}
sl-button[variant='text'].lone::part(base) {
	padding-left: 0px;
}

sl-button.danger::part(label),
sl-button.danger::part(prefix) {
	color: var(--sl-color-danger-600);
}
sl-button.danger::part(label):hover,
sl-button.danger::part(prefix):hover {
	color: var(--sl-color-danger-500);
}

sl-button[variant="primary"] sl-spinner {
	--indicator-color: white;
	margin-left: var(--sl-spacing-x-small);
	position: relative;
	top: 2px;
}

/* Loading spinner for buttons. Always hide unless inside a htmx-request'ing element */
sl-spinner.htmx-indicator {
	display: none;
}
.htmx-request sl-spinner.htmx-indicator {
	display: inline-flex;
}


sl-radio-button {
	background-color: white;
}

h2 > sl-icon,
label > sl-icon {
	margin-right: var(--sl-spacing-x-small);
}

label,
.inner-field-label {
	margin-bottom: 2px;
    display: inline-block;
}
.help-text {
	font-size: var(--sl-input-help-text-font-size-medium);
	color: var(--sl-input-help-text-color);
	display: block;
	margin-top: 4px;
}
.error {
	color: var(--error-red);
}

/* sl-input::part(form-control-label) {
	display: inline;
} */
sl-input.short::part(base) {
	/* width: 140px; */
	width: 100px;
}


/* Style invalid form fields */
.errorlist {
	list-style: none;
    padding-left: 0px;
}
small.error > .errorlist {
	/* When errors are for a specific field, move them closer to the field */
	margin-top: var(--sl-spacing-2x-small);
}
[notvalid]:not([disabled])::part(form-control-label),
[notvalid]:not([disabled])::part(help-text) {
	color: var(--sl-color-danger-600);
}

[notvalid]:not([disabled])::part(base) {
	border-color: var(--sl-color-danger-500);
}

[notvalid]:focus-within::part(base) {
	box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-color-danger-500);
}

.delete-button::part(base) {
	color: var(--delete);
}
sl-dialog .delete-button {
	float: right;
}

.field-group {
	margin-top: var(--sl-spacing-large);
}


/* Add activity dialogs - on Day page and Activity ideas page. */
#add-activity-dialog section.row {
	margin-bottom: var(--sl-spacing-large);
}
#add-activity-dialog section.row:last-of-type {
	margin-bottom: 0px;
}
#add-activity-dialog::part(title) {
	padding-bottom: 8px;
}
#add-activity-dialog::part(footer) {
	text-align: left;
	padding-top: 8px;
}


sl-dialog::part(title) {
	padding-bottom: var(--sl-spacing-2x-small);
}
sl-dialog::part(footer) {
	text-align: left;
}
sl-dialog form .footer {
	margin-top: var(--sl-spacing-large);
}

/* Full-screen dialogs */
sl-dialog.full-screen::part(overlay) {
	background-color: white;
}
sl-dialog.full-screen::part(panel) {
	box-shadow: none;
	max-height: calc(100% - var(--sl-spacing-2x-large));
}
sl-dialog.full-screen::part(close-button) {
	position: absolute;
	top: var(--sl-spacing-large);
	right: var(--sl-spacing-large);
}
sl-dialog.full-screen::part(close-button__base) {
	transition: none;
}


/* When putting buttons inside forms, it looks like shoelace can't be move the buttons to the footer area, and so the button's don't get the spacing */
.dialog-footer {
	margin-top: var(--sl-spacing-large);
}
.dialog-footer-buttons {
	display: flex;
	justify-content: space-between;
}


/* For radio button groups - SR ratings, time, and activity type - show smaller radio buttons for small screens */
.size-medium,
.size-medium {
	display: none;
}

.field-row {
	margin-bottom: var(--sl-spacing-medium);
}

/* A style of button with a light-coloured background and no border */
.bg-button.primary::part(base) {
	color: var(--primary-color);
	background-color: var(--pink-100);
	border: none;
}
.bg-button.primary::part(base):hover {
	color: white;
	background-color: var(--primary-color);
}
.bg-button.secondary::part(base) {
	background-color: var(--grey-100);
}
.bg-button.delete::part(base) {
	color: var(--delete);
	background-color: var(--red-100);
	background-color: var(--grey-100);
	border: none;
}
.bg-button.delete::part(base):hover {
	color: white;
	background-color: var(--delete);
}

/* Content blocks (big white blocks on the page) */
.block {
	border: 1px solid var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
	background-color: white;
	display: flex;
	flex-direction: column;
}
.block-row {
	padding: var(--sl-spacing-medium);
}
.block-row:not(:last-of-type) {
	border-bottom: 1px solid var(--sl-color-neutral-200);
}
.block-row .value-section {
	flex: 1;
	display: flex;
    align-items: center;
}
.block-row {
	display: flex;
	align-items: center;
}
.block-row .actions {
	flex: 1;
    text-align: right;
}
.block-row.form .label {
	color: var(--grey-600);
	/* margin-top: 6px; */
}
.block-row.form form {
	display: flex;
    flex-direction: column;
    gap: var(--sl-spacing-small);
}