/**
 * @author Paul Veenstra
 * @copyright 2024
 */

/* Define variables for color */
:root {
    --tan: Tan; 								/* Used in: background of main-menu-top and main-menu */
    --beige: Beige; 							/* Used in: background of main-content-top and main-content */
    --white: White; 							/* Used in: text color of top-menu and main-menu A andbeamtop andsave-button and menu and table borders */
    --olive-drab: OliveDrab; 					/* Used in: background of main-menu tr */
    --lime-green: LimeGreen; 					/* Used in: background when hover of main-menu tr */
    --forest-green: ForestGreen; 				/* Used in: background of beamtop */
    --light-blue: LightBlue; 					/* Used in: background when hover of data tr and dataproj tr and datastud tr, etc. */
    --light-gray: LightGray; 					/* Used in: background of disabled/readonly form inputs */
    --transparent: Transparent; 				/* Used in: background of top-menu and menu-gap */
    --labelreq: Blue; 					   		/* Used in: color of required labels */
    --btnform: CornflowerBlue; 					/* Used in: background of add-button */
	--navy: Navy; 								/* Used in: backcolor when hover of add-button */
    --shadow-color: rgba(0, 0, 0, 0.3); 		/* Used in: shadowcolor of add-button shadow and save-button */
    --hover-shadow-color: rgba(0, 0, 0, 0.4);	/* Used in: shadowcolor when hover of add-button and save-button */
    --light-green: LightGreen; 					/* Used in: background table-header */
    --silver: Silver; 							/* Used in: borders table */
    --alice-blue: AliceBlue; 					/* Used in: background textarea  */
    --input-border: Silver; 					/* Used in: form inputs */
    --popup-bg: FloralWhite; 					/* Used in: popup background */
    --popup-border: LightGray; 					/* Used in: popup border */
    --popup-shadow: rgba(0, 0, 0, 0.2); 		/* Used in: popup shadow */
	--popup-shadow: rgba(0, 0, 0, 0.2); 		/* Used in: popup shadow */
	--swap1: antiquewhite; 						/* Used in: review to show differen project boundary */
    --swap2: oldlace; 							/* Used in: review to show differen project boundary */
	--help-text: maroon;						/* USed in: display the help text when changing fase */

	--table-background: rgb(255, 217, 102);
	--periode-headers: rgb(48,84,150);
	--cell-background:HoneyDew;

	--width-id: 40px;
	--width-widecolumn: 160px;
	--width-datum: 100px;
	--width-leerling: 200px;
	--width-klas: 80px;
	--width-status: 80px;
	--width-projectstatus: 90px;
	--width-projectnaam: 340px;
	--width-uren: 100px;
	--width-icon: 50px;

}

/* Style for page component */
div.main-menu-top {
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    width: 170px;
    height: 100px;
    background: var(--tan);
}

div.main-menu-top img {
	top:100px;
}

div.main-content-top {
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 170px;
    width: calc(100vw - 170px);
    height: 100px;
    padding-left: 0px;
    background: var(--beige);
}

div.main-menu {
    position: absolute;
    overflow: hidden;
    top: 100px;
    left: 0px;
    width: calc(170px);
    height: calc(100vh - 100px);
    padding-left: 20px;
    background: var(--tan);
}

div.main-content {
	overflow-x: hidden;
	overflow-y : auto;
	position:absolute;
	top:100px;
	left:170px;
	width:calc(100vw - 170px);
	height: calc(100vh - 100px);
	/*padding-left:10px;*/
	/*padding-right:15px;*/
	background: var(--beige);
}

/* top menu with buttons */
div.top-menu,
div.bottom-menu {
	background-color: var(--transparent); /* Transparent background */
	color: var(--white);
	top: 0px;
	padding: 5px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	box-sizing: border-box; /* Ensures padding doesn't overflow */
}

div.bottom-menu {
	padding-left: 0px;
	padding-top: 5px;
}

div.top-menu .add-button,
div.bottom-menu .add-button {
	background-color: var(--btnform);
    color: var(--white);
	border: none;
	padding: 5px 10px;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 5px;
	box-shadow: 2px 2px 5px var(--shadow-color); /* Adds a shadow */
}

div.top-menu .add-button i
div.bottom-menu .add-button i {
	margin-right: 5px;
}

div.top-menu .add-button:hover,
div.bottom-menu .add-button:hover {
    background-color: var(--navy);
    box-shadow: 3px 3px 8px var(--hover-shadow-color);
}

div.main-menu tr {
    background: var(--olive-drab);
}

div.main-menu td {
	font-family: arial;
	font-size: 10pt;
	font-weight: bold;	
	text-align: center;
	padding-top: 4px;
	width: 120px;
	height: 25px;
}

div.main-menu .menu-gap {
    background-color: var(--transparent);
    height: 10px;
}

div.main-menu .menu-gap:hover {
    background-color: var(--transparent);
    cursor: default;
}

div.main-menu A:link, div.main-menu A:visited, div.main-menu A:Active, div.main-menu A:Hover {
   color: var(--white);
   text-decoration:none;
}

div.main-menu tr:Hover {
	background: var(--lime-green);
	cursor: pointer;
}

table.beamtop {
    background-color: var(--forest-green);
    border-top: var(--white) 1px solid;
    border-bottom: var(--white) 1px solid;
    width: 100%vw;
}

td.beamtop {
    font-size: 18pt;
    font-weight: bold;
    color: var(--white);
    text-overflow: clip;
    white-space: nowrap;
}
/*
	Table data with scroll area
*/
.data { width: 1540px; } 	/* make sure the width is allway bigger than the sum */

.data  {
	margin-right: auto;					/* set margin auto so this is centerd on page */
	table-layout: fixed;
	border-collapse: collapse;
	padding-left: 10px;
}

.databutton {
	margin-right: auto;					/* set margin auto so this is centerd on page */
	table-layout: fixed;
	border-collapse: collapse;
}

.data input {
   width: 100%;
}

.data tbody  {
	width: 100%;
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 500px;
}
.data thead tr {
	display: block;
}
.data th, .data td {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid var(--silver);
	vertical-align: top;
    white-space: nowrap;
    overflow:hidden;
}
.data tr:hover {
	background-color: var(--light-blue);
	cursor: pointer;
}

/* little sort direction icon */
.data img {
	vertical-align:middle;
}
.data img:hover {
	cursor: pointer;
}

.data img:active
{
	transform: translateY(2px);
}

th {
	background: var(--light-green);
}

/* Table cell width part for all tables */
/**
  *	 data table
  */
.data th:first-child,
.data td:first-child {
    width: var(--width-id);
	min-width: var(--width-id);
	max-width: var(--width-id);

} /* Leerling */

.data th:nth-child(2),
.data td:nth-child(2) {
    width: var(--width-widecolumn);
	min-width: var(--width-widecolumn);
	max-width: var(--width-widecolumn);
} /* leerlingnaam */

.data th:nth-child(3),
.data td:nth-child(3) {
    width: var(--width-widecolumn);
	min-width: var(--width-widecolumn);
	max-width: var(--width-widecolumn);
} /* Klas */

.data th:nth-child(4),
.data td:nth-child(4) {
    width: var(--width-widecolumn);
	min-width: var(--width-widecolumn);
	max-width: var(--width-widecolumn);
} /* Projecten */

.data th:nth-child(5),
.data td:nth-child(5) {
    width: var(--width-status);
	min-width: var(--width-status);
	max-width: var(--width-status);
} /* Talent j/n */

.data th:nth-child(6),
.data td:nth-child(6)
{
    width: var(--width-projectstatus);
	min-width: var(--width-projectstatus);
	max-width: var(--width-projectstatus);
} /* Project j/n */

.data th:nth-child(7),
.data td:nth-child(7),
.data th:nth-child(8),
.data td:nth-child(8),
.data th:nth-child(9),
.data td:nth-child(9) {
    width: var(--width-icon);
	min-width: var(--width-icon);
	max-width: var(--width-icon);
} /* Akkoord, Edit, Delete */

.data th:nth-child(n+10),
.data td:nth-child(n+10) {
    width: var(--width-icon);
	min-width: var(--width-icon);
	max-width: var(--width-icon);
} /* Remaining columns */

/*
	Table logdata with scroll area
*/
.logdata,
.eventdata {
	margin-right: auto;					/* set margin auto so this is centerd on page */
	width: 1240px;						/* make sure the width is allway bigger than the sum */
	table-layout: fixed;
	border-collapse: collapse;
	padding-left: 10px;
}
.logdata tbody,
.eventdata tbody {
	width: 100%;
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 500px;

}
.logdata thead tr,
.eventdata thead tr {
	display: block;
}
.logdata th,
.logdata td,
.eventdata th,
.eventdata td {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid var(--silver);
	vertical-align: top;
    white-space: nowrap;
    overflow:hidden;
}
.logdata tr:hover,
.eventdata tr:hover {
	background-color: var(--light-blue);
	cursor: pointer;
}

/* log column widths total with: 1110 */
.logdata th:first-child { width: 50px; min-width: 50px; max-width: 50px;} /* id */
.logdata th:first-child + th { width: 100px; min-width: 100px; max-width: 100px; } /* userid */
.logdata th:first-child + th + th { width: 160px; min-width: 160px; max-width: 160px; } /* time */
.logdata th:first-child + th + th + th { width: 400px; min-width: 400px; max-width: 400px; } /* message */
.logdata th:first-child + th + th + th + th { width: 180px; min-width: 180px; max-width: 180px; } /* ip */
.logdata td:first-child { width: 50px; min-width: 50px; max-width: 50px; } /* id */
.logdata td:first-child + td { width: 100px; min-width: 100px; max-width: 100px; } /* userid */
.logdata td:first-child + td + td { width: 160px; min-width: 160px; max-width: 140px; } /* time */
.logdata td:first-child + td + td + td { width: 400px; min-width: 400px; max-width: 400px; } /* message */
.logdata td:first-child + td + td + td + td { width: 180px; min-width: 180px; max-width: 180px; } /* ip */

/* log column widths total with: 1110 */
.eventdata th:first-child { width: 50px; min-width: 50px; max-width: 50px;} /* id */
.eventdata th:first-child + th { width: 350px; min-width: 350px; max-width: 350px; } /* project */
.eventdata th:first-child + th + th { width: 100px; min-width: 100px; max-width: 100px; } /* date */
.eventdata th:first-child + th + th + th { width: 180px; min-width: 180px; max-width: 180px; } /* event */
.eventdata th:first-child + th + th + th + th { width: 30px; min-width: 30px; max-width: 30px; } /* ip */
.eventdata td:first-child { width: 50px; min-width: 50px; max-width: 50px; } /* id */
.eventdata td:first-child + td { width: 350px; min-width: 350px; max-width: 350px; } /* project */
.eventdata td:first-child + td + td { width: 100px; min-width: 100px; max-width: 100px; } /* date */
.eventdata td:first-child + td + td + td { width: 180px; min-width: 180px; max-width: 180px; } /* event */
.eventdata td:first-child + td + td + td + td { width: 30px; min-width: 30px; max-width: 30px; } /* ip */


/*
	Table datag with scroll area
*/
.datag,
.datag tbody {
	width: 100%;
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 500px;

}
.datag thead tr {
	display: block;
}
.datag th,
.datag td {
	padding: 5px;
	text-align: left;
	border-bottom: 1px solid var(--silver);
	vertical-align: top;
    white-space: nowrap;
    overflow:hidden;
}

.datag td textarea {
	width: 100%;
    box-sizing: border-box;
}

.datag td img {
	width: 24px;
}

.datag tr:hover {
	background-color: var(--light-blue);
	cursor: pointer;
}

/* special buttons */
.datag button {
	display: inline-flex;
    align-items: center;				/* Vertically center the content */
    padding: 4px 6px;					/* Optional: adjust padding */
	border-radius: 10px;
    cursor: pointer;
	margin-left: 8px;
	margin-right: -8px;
	transition: transform 0.1s ease;  	/* Smooth transition effect */
}

.datag button:active {
    transform: translate(2px, 2px);
}

.datag button img {
	height: 24px;               /* Set icon height to 24px */
    width: auto;                /* Keep aspect ratio */
    margin-right: 8px;          /* Space between the icon and text */
}

.datag button:hover {
	background: FireBrick;
	color: white;
}

/* log column widths total with: 1090 */
.datag th:first-child { width: 50px; min-width: 50px; max-width: 50px;} /* check */
.datag th:first-child + th { width: 50px; min-width: 50px; max-width: 50px;} /* id */
.datag th:first-child + th + th { width: 150px; min-width: 150px; max-width: 150px; } /* wanneer */
.datag th:first-child + th + th + th { width: 150px; min-width: 150px; max-width: 150px; } /* veld */
.datag th:first-child + th + th + th + th { width: 300px; min-width: 300px; max-width: 300px; } /* oud */
.datag th:first-child + th + th + th + th + th { width: 300px; min-width: 300px; max-width: 300px; } /* nieuw */
.datag th:first-child + th + th + th + th + th + th { width: 50px; min-width: 50px; max-width: 50px; } /* wie */
.datag th:first-child + th + th + th + th + th + th + th { width: 90px; min-width: 90px; max-width: 90px; } /* status */
.datag th:first-child + th + th + th + th + th + th + th + th { width: 50px; min-width: 50px; max-width: 50px; } /* status */
.datag th:first-child + th + th + th + th + th + th + th + th + th { width: 50px; min-width: 50px; max-width: 50px; } /*  */

.datag td:first-child { width: 50px; min-width: 50px; max-width: 50px; } /* check */
.datag td:first-child + td{ width: 50px; min-width: 50px; max-width: 50px; } /* id */
.datag td:first-child + td + td { width: 150px; min-width: 150px; max-width: 150px; } /* wanneer */
.datag td:first-child + td + td + td { width: 150px; min-width: 150px; max-width: 150px; } /* veld */
.datag td:first-child + td + td + td + td { width: 300px; min-width: 300px; max-width: 300px; } /* oud */
.datag td:first-child + td + td + td + td + td { width: 300px; min-width: 300px; max-width: 300px; } /* nieuw */
.datag td:first-child + td + td + td + td + td + td { width: 50px; min-width: 50px; max-width: 50px; } /* wie */
.datag td:first-child + td + td + td + td + td + td + td { width: 90px; min-width: 90px; max-width: 90px; } /* status */
.datag td:first-child + td + td + td + td + td + td + td + td { width: 50px; min-width: 50px; max-width: 50px; } /* status */
.datag td:first-child + td + td + td + td + td + td + td + td + td { width: 50px; min-width: 50px; max-width: 50px; } /*  */

/* Form container styling */
.form-container {
	font-family: Arial;
    width: 900px;
	table-layout: fixed;
	border-collapse: collapse;
	padding-left: 10px;
	vertical-align: top;
}

.form-container textarea {
    padding: 2px 2px;
	margin-bottom: 0px;
    box-sizing: border-box;
    background-color: var(--alice-blue);
    border: 2px solid var(--input-border);
    border-radius: 4px;
    resize: none;
	font-size: 13px;
	font-family: arial;
}

/* Form label and input styling */
.form-container label {
	font-size: 0.9em;
    margin: 5px 0 2px;
	vertical-align: top;
}

.form-container input,
.form-container button,
.form-container select,
.form-container .save-button {
    padding: 2px;
    margin-bottom: 0px;
	box-sizing: border-box;
    background-color: var(--alice-blue);
    border: 2px solid var(--input-border);
    border-radius: 4px;
}

.form-container tr:hover {
	background-color: var(--table-background);
}

.form-container input:hover,
.form-container select:hover,
.form-container textarea:hover {
	background-color: var(--light-gray);
}

.form-container .save-button {
	background-color: var(--btnform);
    color: var(--white);
	border: none;
    cursor: pointer;
    box-shadow: 2px 2px 5px var(--shadow-color);
}

.form-container .save-button:hover {
    background-color: var(--navy);
    box-shadow: 3px 3px 8px var(--hover-shadow-color); /* Darker shadow on hover */
}

.form-container input[readonly],
.form-container select:disabled,
.form-container textarea:read-only {
    background-color: var(--light-gray);
}

.form-container .form-edit tr {
	vertical-align: bottom;
}

.form-container table {
	border-collapse: collapse;
	border:none;
}

.form-container td:first-child {
	width: 120px;
}

.form-container td:nth-child(2) {
	width: 15px;
}

.clear-btn {
	position: relative;
	right: 20px;
    background: none;
    border: none;
    font-size: 10px;
    cursor: pointer;
}

.images {
	font-size: 9pt;
}

body {
    font-size: 11pt;
	font-family: arial,verdana;
}

body table tr td label {
    font-size: 9pt;
}

body label.required {
	color: var(--labelreq);
}

.popup {
	display: none;
    position: fixed;
    background-color: var(--popup-bg);
    border: 1px solid var(--popup-border);
    padding: 10px;
    max-width: 250px;
    box-shadow: 0px 4px 8px var(--popup-shadow);
    border-radius: 4px;
    z-index: 100;
    word-wrap: break-word;
    pointer-events: none; /* Ensures the popup doesn’t interfere with mouse events */
}

/*  */
.help-container {
	display: flex;
    align-items: center;
}

.help-text {
    margin-left: 15px;
    font-size: 0.9em;
    color: var(--help-text);
	position: relative; /* Enables positioning adjustments */
    top: -10px; /* Adjust this value to move the help text higher */
}

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 250px;
	min-width: 250px;

    background-color: var(--popup-bg);
	border: 1px solid var(--popup-border);
    color: black;
    text-align: Left;
    border-radius: 4px;
    padding: 6px 8px;

    position: absolute;
    z-index: 1000;
    top: -5%;
    left: 100%;

    opacity: 0;
    transition: opacity 0.3s;

    white-space: normal;    /* allow multiple lines */
    word-wrap: break-word;  /* break long words */
    line-height: 1.3em;     /* decent spacing between lines */
    display: block;         /* ensure block so height respects lines */
    overflow: visible;      /* avoid clipping */
    box-sizing: border-box; /* include padding in width */
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}