/**
 * @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 */

	--width-id: 40px;
	--width-leerlingnr: 100px;
	--width-datum: 100px;
	--width-leerling: 200px;
	--width-klas: 80px;
	--width-status: 70px;
	--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 {
	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.top-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 {
	margin-right: 5px;
}

div.top-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: verdana;
	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;
}

.beamtop-version {
	font-size: 8pt;
    font-weight: bold;
    color: var(--white);
	text-overflow: clip;
    white-space: nowrap;
	float: right;
	margin-right: 5%;
}

/*
	Table data with scroll area
*/
.data, .datacomm { width: 1240px; } 	/* make sure the width is allway bigger than the sum */
.dataproj { width: 1540px; }  			/* make sure the width is allway bigger than the sum 1210 */
.datastud { width: 1540px; }			/* make sure the width is allway bigger than the sum */
.datafiles { width: 1540px; }

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

.data tbody,
.dataproj tbody,
.datastud tbody,
.datafiles tbody,
.datacomm tbody {
	width: 100%;
	display: block;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 500px;

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

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

.data img:active,
.dataproj 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-leerlingnr);
	min-width: var(--width-leerlingnr);
	max-width: var(--width-leerlingnr);

} /* Leerling */

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

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

.data th:nth-child(4),
.data td:nth-child(4) {
    width: var(--width-icon);
	min-width: var(--width-icon);
	max-width: var(--width-icon);
} /* 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);
} /* Total hours */

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

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

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

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

/**
  *	 data column for projects
  */
.dataproj th:first-child,
.dataproj td:first-child {
    width: var(--width-leerling);
	min-width: var(--width-leerling);
	max-width: var(--width-leerling);
} /* Leerling */

.dataproj th:nth-child(2),
.dataproj td:nth-child(2) {
    width: var(--width-projectnaam);
	min-width: var(--width-projectnaam);
	max-width: var(--width-projectnaam);
} /* Projectnaam */

.dataproj th:nth-child(3),
.dataproj td:nth-child(3),
.dataproj th:nth-child(4),
.dataproj td:nth-child(4),
.dataproj th:nth-child(7),
.dataproj td:nth-child(7),
.dataproj th:nth-child(8),
.dataproj td:nth-child(8),
.dataproj th:nth-child(9),
.dataproj td:nth-child(9) {
    width: var(--width-icon);
	min-width: var(--width-icon);
	max-width: var(--width-icon);
} /* Project Uren, Lessen, Akkoord, Edit, Delete */

.dataproj th:nth-child(5),
.dataproj td:nth-child(5),
.dataproj th:nth-child(6),
.dataproj td:nth-child(6) {
    width: var(--width-datum);
	min-width: var(--width-datum);
	max-width: var(--width-datum);
} /* Startdatum, Einddatum */

.dataproj th:nth-child(n+10),
.dataproj td:nth-child(n+10) {
    width: 30px;
	min-width: 30px;
	max-width: 30px;
} /* Remaining columns */

/**
  *	 data column for communications
  */
.datacomm th:first-child,
.datacomm td:first-child {
    width: 50px;
	min-width: 50px;
	max-width: 50px;
} /* id */

.datacomm th:nth-child(2),
.datacomm td:nth-child(2) {
    width: 100px;
	min-width: 100px;
	max-width: 100px;
} /* User */

.datacomm th:nth-child(3),
.datacomm td:nth-child(3) {
    width: 100px;
	min-width: 100px;
	max-width: 100px;
} /* Leerling */

.datacomm th:nth-child(4),
.datacomm td:nth-child(4) {
    width: 300px;
	min-width: 300px;
	max-width: 300px;
} /* Bericht */

.datacomm th:nth-child(5),
.datacomm td:nth-child(5) {
    width: 160px;
	min-width: 160px;
	max-width: 160px;
} /* Datum en tijd */

.datacomm th:nth-child(n+6),
.datacomm td:nth-child(n+6) {
    width: 50px;
	min-width: 50px;
	max-width: 50px;
} /* Remaining */

/**
  *	 data column for students
  */
.datastud th:first-child,
.datastud td:first-child {
    width: 50px;
	min-width: 50px;
	max-width: 50px;
} /* id */

.datastud th:nth-child(2),
.datastud td:nth-child(2) {
    width: 100px;
	min-width: 100px;
	max-width: 100px;
} /* Project */

.datastud th:nth-child(3),
.datastud td:nth-child(3) {
    width: 100px;
	min-width: 100px;
	max-width: 100px;
} /* Leerling */

.datastud th:nth-child(4),
.datastud td:nth-child(4),
.datastud th:nth-child(5),
.datastud td:nth-child(5) {
    width: 180px;
	min-width: 180px;
	max-width: 180px;
} /* Waar, Adres */

.datastud th:nth-child(6),
.datastud td:nth-child(6),
.datastud th:nth-child(7),
.datastud td:nth-child(7) {
    width: 100px;
	min-width: 100px;
	max-width: 100px;
} /* Begeleider(s), Beschrijving */

.datastud th:nth-child(8),
.datastud td:nth-child(8) {
    width: 30px;
	min-width: 30px;
	max-width: 30px;
} /* Opmerking */

.datastud th:nth-child(9),
.datastud td:nth-child(9) {
    width: 90px;
	min-width: 90px;
	max-width: 90px;
} /* Startdatum */

.datastud th:nth-child(10),
.datastud td:nth-child(10) {
    width: 60px;
	min-width: 60px;
	max-width: 60px;
} /* Uren */

.datastud th:nth-child(n+11),
.datastud td:nth-child(n+11) {
    width: 30px;
	min-width: 30px;
	max-width: 30px;
} /* Akkoord, Edit, Delete, Remaining */

/**
  *	 data column for files
  */
.datafiles th:first-child,
.datafiles td:first-child {
    width: 140px;
	min-width: 140px;
	max-width: 140px;
} /* Leerling */

.datafiles th:nth-child(2),
.datafiles td:nth-child(2) {
    width: 650px;
	min-width: 650px;
	max-width: 650px;
} /* Filename */

.datafiles th:nth-child(3),
.datafiles td:nth-child(3) {
    width: 100px;
	min-width: 100px;
	max-width: 100px;
} /* Link */

.datafiles th:nth-child(n+4),
.datafiles td:nth-child(n+4) {
    width: 30px;
	min-width: 30px;
	max-width: 30px;
} /* 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 */


/* Form container styling */
.form-container {
    display: flex;
    flex-direction: column;
    width: 900px;
    margin: 20px 0;
	margin-right: auto;					/* set margin auto so this is centerd on page */
	table-layout: fixed;
	border-collapse: collapse;
	padding-left: 10px;
	vertical-align: top;

}

.form-container textarea {
    width: 550px;
    height: 150px;
    padding: 6px 6px;
	margin-bottom: 20px;
    box-sizing: border-box;
    background-color: var(--alice-blue);
    border: 2px solid var(--input-border);
    border-radius: 4px;
    resize: none;
}

/* 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: 8px;
    margin-bottom: 20px;
	box-sizing: border-box;
    background-color: var(--alice-blue);
    border: 2px solid var(--input-border);
    border-radius: 4px;
}

.form-container input[type=text] {
	width: 550px;
}

.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;
}

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

.images {
	font-size: 9pt;
}

body {
    font-size: 11pt;
}

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

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

.dlword img {
    vertical-align: middle;
    margin-right: 5px;
}

.dlword span {
    vertical-align: middle;
}

.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 */
}

/* Style for the dropdown */
.dropdown {
	position: absolute;
	border: 1px solid #ccc;
	background-color: #fff;
	display: none;
	max-height: 150px;
	overflow-y: auto;
	z-index: 1000;
}
.dropdown-item {
	padding: 5px;
	cursor: pointer;
}
.dropdown-item:hover {
	background-color: #f0f0f0;
}

/* CK Editor CSS overides */
/* Remove the logo of the ck editor
   Set minimal height
   Set width to aprox A4
*/
.ck-powered-by__label {
   display: none;
}
.ck-powered-by {
    display: none;
}

.ck-editor__editable {
    min-height: 100px;
    max-height: calc(100vh - 300px);

}

.ck.ck-editor__main>.ck-editor__editable {
    width: 800px;
}