/* MOD-IN-BROWSER */

header {
	background: #0073aa;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	height: 80px;
}

.page-header {
	position: sticky;
	top: 0px;
	z-index: 99;
	height: 80px;
	padding: 10px;
	display: grid;
	align-content: center;
	grid-template-columns: 1fr 1fr;
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	box-shadow: inset 1px 1px 20px -5px #fff5;
}

.page-header {
	opacity: 0;
	max-height: 40px;
}

/* Pill Counter App Styles */
#pill-counter-app {
	margin: 20px auto;	/* Center the main app container */
	max-width: 900px;	/* Max width for the app */
}

#medications-table-container {
	background: #fff;
	border: 1px solid #ccd0d4;
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
	border-radius: 5px;
}

.table-header-wrapper {
	display: flex;
	justify-content: space-between;	/* Puts title and button on opposite ends */
	align-items: center;
	margin-bottom: 20px;
	background-color: #0073aa;	/* WordPress blue */
	padding: 15px 20px;
	margin: -20px -20px 20px -20px;	/* Extend to edges of container */
	border-bottom: 1px solid #005177;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);	/* Subtle 3D effect */
	border-radius: 4px 4px 0 0;
}

.section-title {
	font-size: 1.8em;
	color: #fff;
	margin: 0; /* Remove default margin */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

#add-new-medication-button {
	/* Styles for the button */
	background-color: #2271b1;	/* WordPress primary blue */
	color: #fff;
	border-color: #fff5;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1), inset -1px 3px 13px -4px #fff3;
	text-shadow: none;
	border-radius: 7px;
	padding: 8px 12px;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
}

#add-new-medication-button:hover {
	background-color: #1a5b8a;
	border-color: #1a5b8a;
}

#medications-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

#medications-table th,
#medications-table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: left;
	vertical-align: middle;
}

#medications-table tr td:last-child {
	display: grid;
	grid-template-columns: auto auto auto;
	min-height: 100px;
	padding: 15px !important;
	align-items: center;
}

#medications-table tr td[data-label="Days Remaining"] {
	text-align: center;
	font-size: 16px;
    font-weight: bold;
}

#medications-table tr td[data-label="End Date"] {
    text-align: center;
    /*font-size: 16px;*/
    font-weight: bold;
}

/* Buttons */
#medications-table tr td[data-label="Actions"] button {
	margin: 0 5px;
	padding: 0px 5px;
	display: grid;
	align-items: center;
	height: 30px;
	border: 1px solid #2271b1;
	border-radius: 4px;
	background-color: #f9f9f9;
	color: #2271b1;
	cursor: pointer;
	transition: all 0.3s ease;
}

#medications-table tr td[data-label="Actions"] button:hover {
	background-color: #2271b1;
	color: #fff;
}

#medications-table th {
	background-color: #f2f2f2;
}

.medication-name-link {
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    color: #0073aa;
    background-color: #f9f9f9;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.medication-name-link:hover {
    background-color: #e0e0e0;
}

.medication-name-link .details-icon {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.6;
    display: inline-block; /* Prevents line break issues */
}

.dosage-time-tag {
    display: inline-block;
    /*background-color: #f0f0f0;*/
	background-color: #f8f8ff; /*ghostwhite*/
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85em;
    font-weight: normal;
    color: #777;
    margin-left: 5px;
	margin-right: 5px;
    white-space: nowrap;
}

.alias-tag {
    display: inline-block;
    background-color: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 0.8em;
    color: #777;
    margin: 2px 0;
}

span.days-remaining {
    padding: 10px;
    border: 1px solid lime;
    border-radius: 50%;
    display: inline-block;
    height: 50px;
    width: 50px;
    line-height: 26px;
    color: #333;
    /* background-color: lightgreen; */
    text-align: center;
}

#medications-table td[data-label="Aliases"] {
    text-align: right;
}

/* Modal Styles */
.pill-counter-modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 100000;
	/* Sit on top */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgba(0, 0, 0, 0.7);
	/* Black w/ opacity */
}

.pill-counter-modal-content {
	background-color: #fefefeee;
	margin: 5% auto;
	/* 5% from the top and centered */
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
	width: 80%;
	/* Could be more or less, depending on screen size */
	max-width: 700px;
	/* Max width for larger screens */
	position: relative;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19), inset 1px -6px 10px 2px #ccc, inset 10px 0px 10px 20px #fff;
	-webkit-animation-name: animatetop;
	/* Add animation */
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s;
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {
		top: -300px;
		opacity: 0
	}

	to {
		top: 5%;
		opacity: 1
	}
}

@keyframes animatetop {
	from {
		top: -300px;
		opacity: 0
	}

	to {
		top: 5%;
		opacity: 1
	}
}

.pill-counter-modal-close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	line-height: 20px;
}

.pill-counter-modal-close:hover,
.pill-counter-modal-close:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

.modal-title {
	font-size: 2em;
	color: #fff;
	background-color: #0073aa;
	/* WordPress blue */
	padding: 15px 20px;
	margin: -20px -20px 25px -20px;
	/* Extend to edges of container, more bottom margin */
	border-bottom: 1px solid #005177;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), inset 0px 19px 16px -16px #fff4;
	/* Subtle 3D effect */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	border-radius: 4px 4px 0 0;
	text-align: center;
}

.stage-subtitle {
	font-size: 1.4em;
	color: #444;
	margin-top: 20px;
	margin-bottom: 10px;
	border-bottom: 1px solid #eee;
	padding-bottom: 5px;
}

.stage-description {
	font-size: 0.9em;
	color: #666;
	margin-bottom: 20px;
	font-style: italic;
}

#inventory-add-container label {
	margin-bottom: 5px;
}

#inventory-add-container input {
	margin-bottom: 15px;
}

/* Form Stage Styling */
#form-stage-1 p:nth-child(3) {
    width: 48%;
    display: inline-block;
}

#form-stage-1 p:nth-child(4) {
    width: 51%;
    display: inline-block;
}

.form-stage p {
	margin-bottom: 15px;
}

.form-stage label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
	padding-left: 5px;
}

.form-stage input[type="text"],
.form-stage input[type="number"],
.form-stage textarea,
.form-stage select {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.form-stage .required {
	color: red;
}

.form-stage .form-navigation {
	text-align: right;
	margin-top: 20px;
}

.form-stage .form-navigation button {
	margin-left: 10px;
}

.schedule-item {
	border: 1px solid #ccc;
	padding: 10px;
	margin-bottom: 20px;
	border-radius: 5px;
	position: relative;
	background-color: #f0f0f0;
	-webkit-backdrop-filter: blur(35px);
	backdrop-filter: blur(35px);
	box-shadow: 1px 1px 10px 1px #3333;
}

.schedule-entry {
	display: grid;
	/* Adjust columns: Pills(100px), Strength(100px), Unit(1fr), Time(140px), Space(50px) */
	grid-template-columns: 100px 100px 1fr 140px 50px;
	gap: 10px;
	align-items: center;
	/* Vertically align items in the center */
}

.schedule-entry input,
.schedule-entry select {
	margin-bottom: 0;
}

.remove-schedule-entry {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #aaa;
	font-size: 1.2em;
	cursor: pointer;
	padding: 0 5px;
	line-height: 1;
}

.remove-schedule-entry:hover {
	color: #d54e21;
	/* WordPress error red */
}

button:disabled {
	border-color: #ccc !important;
	color: #aaa !important;
}

/* Login Gate Banner Styles */
#login-gate-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 70vh;
	/* Increased height */
	padding: 80px 20px;
	text-align: center;
	background-image: url('https://apps.chileshops.cl/wp-content/plugins/pill-counter/assets/img/fondo-pastillas-azul.jpg');
	background-size: cover;
	background-position: top;
	background-size: 103% 140%;
	/* background-position-x: -58px; */
	position: absolute;
	overflow: auto;
	/* Needed for the pseudo-element */
	border-radius: 15px;
	/* Rounded corners for the banner */
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	/* Subtle shadow for the banner */
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#login-gate-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.2);
	/* More transparent overlay */
	-webkit-backdrop-filter: blur(5px);
	/* Glassmorphism blur effect */
	backdrop-filter: blur(5px);
	/* For Safari */
	z-index: 1;
	border-radius: 15px;
	/* Match banner border-radius */
	display: none;
}

.login-gate-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	/* Space between header and form box */
	width: 100%;
	position: relative;
	/* Ensure content is above the ::before pseudo-element */
	z-index: 2;
	padding: 50px;
	position: absolute;
	top: 100px;
	border-right: 1px solid #ccc;
	border-top: 1px solid #fff;
	width: 60%;
	min-width: 300px;
	border-radius: 20px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: inset 0px 0px 45px -15px #fff9;
	overflow: auto;
	margin-bottom: 30px;
}

.login-gate-header {
	color: #fff;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
	/* -webkit-backdrop-filter: blur(15px); */
	/* backdrop-filter: blur(15px); */
	/* box-shadow: 1px 1px 20px -15px #fff9; */
	/* border: 1px solid #fff2; */
	/* border-radius: 15px; */
	padding: 10px 30px;
}

.login-gate-title {
	font-size: 3.5em;
	/* Larger title */
	margin-bottom: 10px;
}

.login-gate-description {
	font-size: 1.2em;
	max-width: 500px;
	/* Constrain width of description */
	margin: 0 auto;
	color: midnightblue;
	font-family: Roboto, Arial, Segoe UI, Helvetica Neue, Noto Sans, sans-serif;
	/* font-family: sans-serif; */
	font-style: italic;
	font-stretch: extra-expanded;
	font-weight: 300;
	text-shadow: 1px 2px 3px #0008;
}

.login-gate-instruction {
	font-size: 13px;
	max-width: 500px;
}

.login-gate-form-box {
	width: 100%;
	max-width: 320px;
	/* Smaller form box */
	padding: 30px;
	border-radius: 15px;
	/* Glassmorphism Effect */
	background: rgb(255 255 255 / 15%);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(20px);
	/* For Safari */
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.3);
}

.login-gate-form-box .login-username label,
.login-gate-form-box .login-password label {
	display: none;
	/* Hide labels, we will use placeholders */
}

.login-gate-form-box .login-username,
.login-gate-form-box .login-password {
	position: relative;
	margin-bottom: 15px;
	/* Adjust margin to accommodate tooltip */
}

.login-gate-form-box input[type="text"],
.login-gate-form-box input[type="password"] {
	width: 100%;
	padding: 12px;
	margin-bottom: 0;
	/* Remove margin from input itself */
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 8px;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	font-size: 1em;
}

/* Placeholder text color */
.login-gate-form-box input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.login-gate-form-box input.is-invalid {
	border-color: #ff4d4d;
	/* Red border for invalid fields */
}

.validation-tooltip {
	position: absolute;
	background-color: #ff4d4d;
	color: white;
	padding: 5px 10px;
	border-radius: 4px;
	font-size: 0.8em;
	white-space: nowrap;
	z-index: 10;
	top: calc(100% + 5px);
	/* Position below the input */
	left: 50%;
	/* Center horizontally */
	transform: translateX(-50%);
	/* Adjust for its own width */
	pointer-events: none;
	/* Allow clicks to pass through */
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.validation-tooltip::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent #ff4d4d transparent;
}

#login-ajax-message {
	/*background-color: rgba(255, 255, 255, 0.9);*/
	/*color: #d54e21;*/
	/* WordPress error red */
	padding: 10px;
	margin-bottom: 15px;
	border-radius: 5px;
	/*border: 1px solid #d54e21;*/
	text-align: center;
	font-weight: bold;
}

#login-ajax-message.success {
	color: #46b450;
	/* WordPress success green */
	border-color: #46b450;
}

.login-gate-form-box input[type="submit"] {
	width: 100%;
	padding: 12px;
	border: none;
	border-radius: 8px;
	background-color: #0073aa;
	color: white;
	font-size: 1em;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.login-gate-form-box input[type="submit"]:hover {
	background-color: #008ec2;
}

.login-gate-form-box .login-remember {
	text-align: left;
	font-size: 0.9em;
	color: #fff;
}

.login-gate-form-box .login-remember label {
	display: inline-block;
}

/* Login Floating Message */
#login-ajax-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* Start slightly smaller and centered */
    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
	font-size: 13px;
    padding: 25px 30px;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    z-index: 999999;
    display: flex; /* Use flex to align content */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: auto;
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    visibility: hidden; /* Hide it initially */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0.3s; /* Smooth transition */
}

#login-ajax-message.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1); /* Scale to normal size */
}

#login-ajax-message.error {
	background-color: #ffe0e0;
	/* Soft red background */
	color: #a00;
	/* Darker red text */
	border: 1px solid #f0a0a0;
}

#login-ajax-message.success {
	background-color: #e6ffe6;
	/* Light green background */
	color: #46b450;
	/* WordPress success green */
	border: 1px solid #46b450;
}

#login-ajax-message .message-text {
	flex-grow: 1;
	font-size: 1.1em;
	/* Slightly larger font */
	text-align: center;
}

#login-ajax-message .close-message {
	position: absolute;
	/* Position absolutely within the message box */
	top: 10px;
	/* Adjust as needed */
	right: 10px;
	/* Adjust as needed */
	cursor: pointer;
	font-size: 1.8em;
	/* Larger for better clickability */
	font-weight: bold;
	color: #888;
	padding: 0 5px;
	line-height: 1;
	background: none;
	/* Ensure no background */
	border: none;
	/* Ensure no border */
}

#login-ajax-message .close-message:hover {
	color: #333;
}

/* Responsive adjustments */
@media (max-width: 768px) {

	body main.site-main {
		padding-inline-end: 5px !important;
		padding-inline-start: 5px !important;
	}

	.page-header {
		max-height: 20px;
	}

	.page-content {
		padding: 0 10px;
	}

	#medications-table-container {
		border: 0px solid #ccd0d4;
		padding: 1px;
	}

	/* Adjust pill counter modal width */
	.pill-counter-modal-content {
		width: 95%;
		margin: 2.5% auto;
	}

	/* Table as cards */
	#medications-table thead {
		display: none;
		/* Hide table headers */
	}

	#medications-table,
	#medications-table tbody,
	#medications-table tr,
	#medications-table td {
		display: block;
		/* Make table elements behave like blocks */
		width: 100%;
	}

	#medications-table tr {
		margin-bottom: 20px;
		border: 1px solid #ddd;
		display: block;
		padding: 10px;
		border-radius: 15px;
		background-color: #f9f9f9;
		-webkit-backdrop-filter: blur(25px);
		backdrop-filter: blur(25px);
		box-shadow: 1px 1px 15px 1px #ccc9;
	}

	#medications-table tbody>tr:nth-child(odd)>td,
	#medications-table tbody>tr:nth-child(odd)>th {
    	background-color: transparent;
	}

	#medications-table td {
		border: none;
		position: relative;
		padding-left: 45%;
		text-align: right;
		margin-bottom: 0;
		min-height: 37.6px; 
	}

	#medications-table td:not(:first-child){
		border-top: 0px solid #ccc5;
	}

	#medications-table tr td:first-child,
	#medications-table tr td:last-child {
		padding-left: 0;
		background: transparent;
	}

	#medications-table td::before {
		content: attr(data-label);
		position: absolute;
		left: 6px;
		width: 45%;
		padding-right: 10px;
        padding-bottom: 3px;
		white-space: nowrap;
		text-align: left;
		font-weight: bold;
		border-bottom: 1px solid #ccc8;
		color: #555;
	}

	/* Ensure no-medications-row is responsive */
	#no-medications-row td {
		padding-left: 0;
		/* No data-label for this row */
		text-align: center;
	}

	#medications-table tr td:first-child::before,
	#medications-table tr td:last-child::before {
		display: none;	 /* Hide data-label on small screens */
	}

	#medications-table tr td:first-child {
		text-align: center; 	/* Center content on small screens */
		font-size: large;
	}

	#medications-table tr td[data-label="Days Remaining"] {
		text-align: right;
	}

	#form-stage-1 p:nth-child(3),
	#form-stage-1 p:nth-child(4) {
		width: 100%;
		display: block;
	}

	#login-gate-banner {
		background-size: cover;
		border-radius: 0;
	}

	.dosage-time-tag {
		background-color: #fffaf0;
		font-weight: normal;
		color: #5f9ea0;
		margin-right: 5px;
	}
	
	.login-gate-content {
		gap: 25px;
		width: 100%;
		padding: 20px 5px;
		top: 80px;
		width: 100%;
		border-radius: 0px;
		margin-bottom: 30px;
	}

	.login-gate-header {
		padding: 0px 10px;
		width: 100vw;
	}

	.login-gate-form-box {
		margin-bottom: 80px;
	}
}

@media (max-width: 480px) {

	.schedule-entry,
	.inventory-entry {
		grid-template-columns: 1fr;
		/* Stack columns on small screens */
	}

	.remove-schedule-entry {
		top: 10px;
		right: 10px;
		transform: none;
		background-color: #f9f9f9 !important;
		height: 42px;
	}

	.login-gate-form-box {
		margin-bottom: 20px;
	}

	.table-header-wrapper {
		flex-direction: column;
		gap: 10px;
	}

}