/* Start with an important constant. */
:root {
	--expected-lines-in-tfoot: 10rem;
}
	/*
		On page display_table.php (and any other page where an HTML table is stretched to the entire width and height of a browser window) we anticipate that we need to add this many lines of padding at the bottom of tbody so that tfoot (which floats on a higher z-index layer) to not cover any rows of the table. This particular value is used on the 'generic' calls which output disply_table.php in its default form, which is produced by a 5-line query block, four lines of query plus one line of 'x rows.'. Plus enough extra to account for vertical padding and line-height.
		
		Calls to display_table.php which are launched by links from useful_queries.php, on the other hand, get a revised value set by software. Code counts the number of lines in the query and uses that as a basis for calculating an estimate.
	*/

/*
	This stylesheet controls the styling of all table.display_data elements (except for some CSS which is attached to specialized pages, see below). Note that I am now developing a non-scrolling paradigm for display_data tables, and none of the styles for scrolling tables have been tested. Update. I should go ahead remove all references to scrolling tables from this stylesheet. I will retain the one scrolling element defined in display_table_docs.css.
	
	In this stylesheet, there is only one var(--value) constants defined, look for the rest of them in the root: section of  TitusHeights.studio.css. Refer to the long comment and to the root: rule at the top of that file.

	The rules in this document are divided into groups:

		- rules that affect things outside of a display_data table
		- rules that affect display_data tables on any page, not just display_table.php
		- rules that affect display_data tables only on the display_table.php page (a minority)
		- (Rules which affect display_data tables that appear only on other pages are being moved elsewhere. See below.)
		- rules that affect the whole display_data table, or parts of all three sections (thead, tbody and tfoot) of the table
		- rules that affect thead only
		- rules that affect tbody only
		- rules that affect tfoot only
		- rules that affect a table's <caption>, if it has one

	Within the groups defined above, everything is sorted strictly by rule alphabetical order.
	
	All display_data tables are non-scrolling by default. I will rebuild this stylesheet to add a class
	table.display_data.scrolling, which will appear only in the navigation column, at least for now.
	(Navigation column tables need to be scrolling, because I need to know how far down the page to place the next item after a table, and I can only do that if I hold the table down to a known height. At least, that's what I think.)
	
	Style rules for the the following specialized pages are not defined here.
		#image_metadata table on image_viewer.php. See image_viewer.css instead.
		page#videos_on_the_clouds table.display_dataa. See videos_on_the_cloud.css.
*/

/* We start with a few rules that apply to .display_data tables, but not on the #display_table page. This is not convoluted at all. */

/* I would like the width of the to remain constant with or without a vertical page scrollbar appearing, but I don't think I can do that in CSS. If the user never stretches or shrinks the vertical size of the browser window this will never be an issue. */
body:not(#display_table) table.display_data {
	width: 98%; /* By default, stretch table across available width of column, leaving a little gutter on the right. */
}

/* Next, we want to initialize all table cells to a default width of zero. They will stretch to the width of their contents but no further.
Exceptions:
1. I would like the tfoot to be the same width as the rest of the table. It appears that the next exception helps with that.
2. This width minimization thing does not apply to page display_table.php, or anywhere else we see tables as wide as the entire page. */
body:not(#display_table) table.display_data :is(thead th, tbody td) {
	width:       0;
	white-space: nowrap; /* Intended for 'full name' column on the list of number of videos for each producer, under 'more', on page pegasys_producers.php. */
}

/* The next two rules align the page_ref th and td on tables not shown on the display_table.php page. I need them both, apparently. */
body:not(#display_table) table.display_data td.page_ref {
	max-width:     1em;
	padding-right: 2em;
}

body:not(#display_table) table.display_data th.page_ref {
	min-width:    4em;
	padding-left: 2.5em; /* Line up with th on non-display_table.php pages. */
}

/* rules that affect things outside of a display_data table on the display_table.php page */

/* Override a rule in TitusHeights.studio.css. */
body#display_table #THS_page_body {
	margin: calc(-1rem - 1px) 0 0 0; /* Specific enough? */
}

/* This class is retired. */
/* body#display_table #table_name_positioner {
	display: none; /* Debugging. * /
	height:    0;
	/* left:     29.5rem; */ /* 'long' directory names * /
	left:     24.5rem; /* 'short' directory names * /
	position:  absolute;
	top:       0.2rem;
	z-index:   var(--z-index-in-front);
}*/

/* Positions the 'add a new column' form. Note that this form is not 'sticky', so it scrolls off the top of the page.*/
body#display_table #THS_new_order {
	top: 0.25rem;
}

/*body#display_table table.display_data {
	/* margin: 0; * /
}*/

/* rules that affect all display_data tables, everywhere, not just on display_table.php */
/* Note that none of the .scrolling rules have been tested in a long time, and may be obsolete. */

table.display_data.scrolling {
	table-layout: fixed; /* Required for scrolling tables. */
}

/* one rule that affects the width of both the thead and the tfoot of a display_data table */
/*html body#display_table div#THS_page_body */ table.display_data/*.performers_and_titles*/ :is(thead, tfoot) {
	width: calc(100% - var(--scrollwheel-width)); /* Limits the width of the tfoot to the width of the rest of the table. */
}

/* one rule that affects the individual cells of both the thead and the tfoot of a display_data table */
/*html body#display_table div#THS_page_body*/ table.display_data/*.performers_and_titles*/ :is(thead th, tfoot td) {
	/* background-color: var(--color-bg-display-data); */
	/* border-right:     1px solid var(--color-bg-display-data); */
	color: var(--color-background);
	/* vertical-align:   bottom; */
	/* width: calc(100% - var(--scrollwheel-width)); */
}

html body div#THS_page_body table.display_data.scrolling thead {
	display: table; /* Required for scrolling tables. */
}

table.display_data + table.display_data {
	margin-top: 1rem;
}

/* next two rules: only on display_data.php */
html body#display_table #THS_page_body table.display_data.scrolling thead th:last-child {
	/* padding-right: var(--scrollwheel-width); */
}

body#display_table table.display_data thead {
	position:  sticky; /* Freeze position of thead. */
	top:      29px;
	z-index:   var(--z-index-in-front); /* in front of tbody */
}

body#display_table table.display_data.scrolling thead {
	position: fixed; /* I need to set a position for z-index to have an effect. Now I'm thinking 'fixed' will divorce the thead completely from the tbody, which is what I need. Maybe. */
}

/* this rule: on any page */
table.display_data thead th {
	/* font-size: 12pt; */
	white-space: nowrap; /* However, I decided to allow word wrap inside the td table cells. */
}

/***** ***** ***** debugging ***** ***** *****/
/* The next two rules affect both thead and tbody. These special-case rules are used in development.
Every table.display_data cell has an 'invisible' (same color as background) border-right. These rules make those borders visible.  When uncommented, these two rules override the normal border colors. */
/* Now that I have solved all of my table problems ;-) I don't need these rules any more.*/
html body#display_table div#THS_page_body table.display_data thead tr th {
	/* border-right: 1px solid var(--color-background); */
}

html body#display_table div#THS_page_body table.display_data tbody tr td {
	/* border-right: 1px solid var(--color-text-default); */
}
/***** ***** ***** debugging ***** ***** *****/

/* The following rules affect the tbody section only. */

/* Default padding for display_data tables on pages other than display_table.php. */
body:not(#display_table) table.display_data tbody td {
	padding-left:   var(--teeny-tiny);
	padding-right:  var(--teeny-tiny);
}

/* A 40-row table (no cells wrapping to a second line) fits on my large display (1792 x 1344) exactly. The last three attributes are not required for scrolling but for positioning. */
/* table.display_data tbody on any page */
table.display_data.scrolling tbody {
	display:    block;                   /* required for scrolling */
	overflow-y: scroll;                  /* Display scrollbar on screen in all circumstances.  I don't understand why we don't see it on non-display_table.php pages. */
	position:   relative;                /* This is not required for scrolling but for positioning, must be a value other than fixed, initial, or unset. */
	z-index:    var(--z-index-beneath);
}

/* table.display_data tbody on display_table.php only */
body#display_table table.display_data tbody {
	/* margin-bottom: 11em;
	max-height:     calc(100vh - 8.5rem); /* The exact amount of space needed for 41 table rows. A week ago, I couldn't even spell 'calc', and now... */
	top:            2.4rem;
}

/* table.display_data tbody on style_demo.php only */
body#style_demo table.display_data tbody {
	max-height: calc(6 * 1.8em); /* short table tbody for this non display_table.php page */
}

body#statistics table.display_data tbody {
	max-height: calc(5 * 1.8em); /* short table tbody for this non display_table.php page */
}

/* First column of two-column navmenu on display_table_docs pages. */
table.column_list.display_data.sidebar td li {
	margin-left: -1em;
}

table.column_list.display_data.sidebar td.scroll_cell {
	display:     block;
	height:      0;
	overflow-x:  hidden;
	overflow-y:  scroll;
	white-space: nowrap;
	width:       12em;
}

/* 'zebra striping'. The word '(even)' shows as '(2n)' in Firefox's Inspect Element tool. I used to think that a background-color property could not apply to a tr, only to a bunch of tds, but it appears I was mistaken. */
table.display_data tr:nth-child(even) {
	background-color: var(--color-zebra-even);
}

/* This rule constrains all text in table.display_data tbody cells to the width of the cell, except in the sidebar. */
/*body#display_table*/ table.display_data:not(.sidebar) tbody tr td {
	/*border-right:  1px solid var(--color-background); */
	height:        1.25em;
	max-height:    2em;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* The next two rules are for styling and positioning the #deselect_checkbox and its associated label. */
#deselect_checkbox {
	font-family: var(--font-family-sans-serif);
	left:       25em;
	position:    absolute;
	top:         5px;
	z-index:     2;
}

#deselect_label {
	font-family: var(--font-family-sans-serif);
	font-size:  90%;
	left:       21.25em;
	position:   absolute;
	top:         5px;
	z-index:     2;
}
/* The next two rules are for debugging the .display_data table layout. They override the normal table styling. */
html body#display_table div#THS_page_body table.display_data.perfomers_and_titles tbody tr td {
	/* border:  1px solid black;*/
}

html body#display_table div#THS_page_body table.display_data.perfomers_and_titles thead tr th {
	/* border:  1px solid white; */
}

table.display_data thead {
	background-color: var(--color-bg-display-data); /* Required because I am using display:inline-grid. */
	/* display:          inherit; */
	max-height:       100%;
	/* position:         fixed; */
}

table.display_data.scrolling thead {
	position:         relative; /* Required for overflow:hidden to work. */
}

/* Limit the width of every td and th cell.*/
html body#display_table div#THS_page_body table.display_data.performers_and_titles /*:is(td ,*/ th /*)*/ {
	overflow: hidden;
}

/* Default values for every th.
We need the borders for the next two rules so that ths and tds will line up correctly. */
table.display_data thead th {
	border:  1px solid var(--color-bg-display-data); /* DO NOT REMOVE. Change color for debugging. */
	display: table-cell;
	max-width: 0; /* Constrain all columns to the width of the widest td in the column. */
	/* padding-bottom: 3px; */
}

/* I would like to give my display_data tables rounded corners. Can't figure out how. Nothing I have tried works. */
/*body#report_column_widths table.display_data.INFORMATION_SCHEMA thead tr:first-child th:first-child {
	border-top-left-radius: 1rem;
}*/

/* The next rule is equivalent to padding: 1px. */
table.display_data td {
	border: 1px solid transparent; /* May not work in all browsers. DO NOT REMOVE. Change color for debugging. */
}

/* The message_log output is messed up. Update: Not any more. * /
html body:not(#display_table) #THS_page_body table.display_data.message_log {
	width: unset;
}*/

/* html body:not(#display_table) #THS_page_body table.display_data.message_log :is(tbody td, thead th) {
	padding: unset;
	width:   unset;
}*/

/* Generic tbody td text-align rules. */

/* Cells in the following columns always contain the same number of characters and are therefore always centered. Each cell item is either a single character, a date, the word 'play', or a password in hidden or hashed form. Dates in ISO 8601 format are always the same number of characters. */
table.calendar_ths          tbody td.completion_date,
table.calendar_ths          tbody td.end_date,
table.calendar_ths          tbody td.recurring_skip,
table.calendar_ths          tbody td.recurring_until,
table.calendar_ths          tbody td.start_date,
table.cloud_videos          tbody td.year,
table.message_log           tbody td.timestamp,
table.locations             tbody td.loc_exists_YN,
table.login_history         tbody td.activity_update,
table.meta_mosh             tbody td.creation_date,
table.performers_and_titles tbody td.date_started,
table.performers_and_titles tbody td.date_update,
table.performers_and_titles tbody td.latest_mix,
table.recording_notes       tbody td.rune,
table.url_srcer             tbody td.creation_date,
table.url_srcer             tbody td.play_video,
table.url_srcer             tbody td.year,
table.user_table            tbody td.bu_mm_YN,     /* TRUE if meta_mosh needs backup to spreadsheet. */
table.user_table            tbody td.date_joined,
table.user_table            tbody td.date_update,
table.user_table            tbody td.last_login,
table.user_table            tbody td.password,     /* passwords are always obfuscated */
table.user_table            tbody td.PEG_prod_YN
{
	text-align: center;
}

/* Cells in the following columns contain numbers, which are always right-justified. */
/* I don't put PRETTY_DATE_FORMAT ('F j, Y') dates into table columns, but if I did, they would also be right-justified. */
/* td.number_of_videos is an odd duck, it appears on page pegasys_producers.php. */
table.calendar_ths          tbody td.event_id,
table.login_history         tbody td.history_id,
table.message_log           tbody td.log_id,
table.performers_and_titles tbody td.bpm,
table.performers_and_titles tbody td.data_cd,         /* Yes, CSS is case-sensitive. */
table.performers_and_titles tbody td.megabytes,
table.performers_and_titles tbody td.page_ref,
table.performers_and_titles tbody td.reel_no,
table.performers_and_titles tbody td.seconds,
table.performers_and_titles tbody td.tracks,
table.url_srcer             tbody td.aspect_ratio,
table.url_srcer             tbody td.pixels_w,
table.url_srcer             tbody td.pixels_h,
table.user_table            tbody td.vp_width,
table tbody td.number_of_videos
{
	padding-right: var(--teeny-tiny);
	text-align:    right;
}

/* Now we deal with individual th and td cells, in alphabetical order by table and column. Note that we can't further widen any columns in performers_and_titles on display_table.php. I think this is because the table is already as wide as it can be, at least on my narrow screen. Also note that many th and td cells require extra specifiers in their rules. */

/* First, some rules that apply to named cells, but not in specific display_data tables. In alphabetical order by names of column, th cells first, then td cells. */

table.display_data td.filename {
	font-size: 70%; /* Reduce width of column. */
}

table.display_data th.megabytes {
	max-width: 32px; /* Stretch, special case. */
}

body#index table.calendar_ths {width: 30rem}
body#index table.display_data.calendar_ths .event_comments {width: 9em}
body#index table.display_data.calendar_ths .event_keyword  {width: 9em}
body#index table.display_data.calendar_ths .event_name     {width: 9em}
body#index table.display_data.calendar_ths .start_date     {width: 0}

table.cloud_videos td.producer {width:  8em}
table.cloud_videos td.title    {width: 35em}

table.login_history td.activity_update {width: 9em; white-space: nowrap} /* contains two words */
table.login_history td.history_id      {width: 2.6em; padding-right: 1em}

table.locations th.loc_exists_YN  {padding-right: 4em}
table.locations td.street_address {display: block ruby; width: 11em} /* force a single line */

#THS_page_body table.display_data.message_log {width: 0}
#THS_page_body table.display_data.message_log th.code_location {padding-right: 4em}
#THS_page_body table.display_data.message_log td.log_id        {width:         4em}
#THS_page_body table.display_data.message_log th.message       {width:         0}
#THS_page_body table.display_data.message_log td.message       {width:         0}

/* I don't remember why I wrote the following rule. */
table.message_log td.message :is(q, q p)  {
	background: var(--color-diagnostic);
	display:    block;
	padding:    0 0 0 0.5em;
}

#THS_page_body table.display_data.login_history td.user_full_name {
	width: 4em;
}

#THS_page_body table.display_data.message_log td.timestamp {
	padding-right: 0.5em;
	text-align:    right; /* Special case: I allow this timestamp to line-break between the date and time portions. */
	width:         5em;
}

table.message_log td.user_name {width: 10em}
html body#statistics div#THS_page_body table.message_log td.user_name {width: 8em}

table.url_srcer  td.play_video {width: 6em}
table.url_srcer  td.producer   {white-space: nowrap}
table.url_srcer  td.title      {white-space: nowrap}

body#statistics table.user_table td.first_name  {padding-left: 1em;}
body#statistics table.user_table td.last_name   {width: 5em;}
body#statistics table.user_table th.bu_mm_YN    {padding: 0 1.5em  0 0.5em;}
body#statistics table.user_table th.PEG_prod_YN {padding: 0 2.25em 0 0.5em;}

body#pegasys_producers table thead th.number_of_videos {padding-right:  0rem}
body#pegasys_producers table tbody td.number_of_videos {padding-right: 17rem}

body#pegasys_producers table.display_data.row thead th.first_name {width: 0rem}
body#pegasys_producers table.display_data.row tbody td.first_name {width: 0rem}
body#pegasys_producers table.display_data.row thead th.last_name  {width: 0rem}
body#pegasys_producers table.display_data.row tbody td.last_name  {width: 0rem}
body#pegasys_producers table.display_data.row thead th.as_PEGASYS_producer  {width: 6rem}
body#pegasys_producers table.display_data.row tbody td.as_PEGASYS_producer  {width: 6rem}
body#pegasys_producers table.display_data.row thead th.as_user_of_this_website  {width: 6rem}
body#pegasys_producers table.display_data.row tbody td.as_user_of_this_website  {width: 6rem}


/* Last tbody rule, I think. It overrides the 'zebra striping' rule, above.
1. In pull_and_display.php, I add a dummy tr td after the last real tbody tr at the bottom of table.display_data. I color this tr with the lighter zebra stripe color (currently white) to clean up the display.
2. I also apply padding-bottom to this dummy tr td. This is to force the tbody to clear the top of tfoot. The actual number comes from a function that counts the number of lines in the pretty_query(). Uh, not always. The method I am describing here only happens with tables called for from page useful_queries.php. Other pages' tables are on their own, determined by a number hard-coded into this stylesheet. This is ironic, because this rule applies only to the actual display_table.php page (and to any future pages where a single table fills the entire page) .*/
#display_table table.display_data tbody tr:last-child td {
	background-color: var(--color-background); /* Currently white., */
	padding-bottom:   var(--expected-lines-in-tfoot);
}

/* rules that affect both tbody and tfoot */
table.display_data td {
	padding-left: 0.75em;
	text-align:   left;
}

/* rules that affect tfoot only */
/* first: all display_table tfoot sections, use same color scheme as thead. */
table.display_data tfoot {
	background-color: var(--color-bg-display-data);
	color:            var(--color-background);
}

/* second: display_table tfoot sections, on page display_table.php only, non-scrolling */
body#display_table table.display_data tfoot {
	border-bottom: 1rem solid white; /* Prevent tbody text from showing through under the bottom of the tfoot. */
	bottom:        1rem;  /* Same width as the tfoot border-bottom. */
	position:      fixed; /* Keep tfoot stuck to bottom of page, display_table.php only. */
}

/* The next three rules clean up the display of tfoot on display_table.php. */
body/*#display_table*/ table.display_data tfoot td {
	font-size:     initial;
	/*padding-left:  0.5em;*/
	padding-right: 0.5em;
}

body/*#display_table*/ table.display_data tfoot td .pretty_query {
	/*margin-top:    -0.5em;*/
	/*margin-bottom: -0.25em;*/
}

/* Now I need this rule. They determine how much padding-bottom to add above and below the last line inside tfoot, which normally reads 'x ys.', where 'x' is a number, 'y' is a noun such as 'song' or 'video', 's' is the letter 's', and '.' is a dot. */
/*body#display_table*/ table.display_data tfoot td p.tfoot_last_line {
	line-height:    0;
	margin-top:     1em;
	margin-bottom:  0;
	/*padding-top:    0.75em;*/
	padding-bottom: 1em;
}

/*There are a small number of rules which affect display_data tables that appear on pages other than display_table.php. These rules appear to be required when I have a display_data table that does not take the full width of its container and I want to make the tfoot section occupy the entire width of the tbody section. Again, these rules are ordered by table section: whole table, thead, tbody, tfoot. */

table.display_data.performers_and_titles td.filename {
	font-family: var(--font-family-monospace);
}

/* This rule affects the navigation menu table in the sidebar of pages two levels down from DOCUMENT_ROOT/recording_studio/client/display_table_docs/. */
table.display_data.sidebar tbody tr td {
	/* border:  1px solid red; */
	display: revert; /* I don't know why I need this. */
}