/* ============================================================================== 
   File: scr_table.css
	- Stylesheet for ArchiComix TABLES (taken from TipTool and amended)
		for ANY viewports
	- Author: Daniel Hugentobler (DH)
	- created: 25.SEP.2020
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

.tblScroll {						/* scroll-container for wide tables */
	width: 100%;
	margin: 0;
	padding: 0;
	/* horizontal scrollbar to the very bottom */
	overflow-x: auto;			
	overflow-y: hidden;
}

/* temporary makeshift only: until reserached why tables fail to inherit correctly */
/* --------------------------------------------- */
table {
	color: inherit;
	font-size: inherit;
}
 
table,
.tblDisplay {
	empty-cells: show;
	border-collapse: collapse;
	max-width: 96%;					/* prevent nested horizontal scrollbars ! */
}

table .cmd,
table .icon {
	/* a darker shadow for a dark background */
	-webkit-box-shadow: 0.2rem 0.2rem 0.6rem #4b4b4b;
	-moz-box-shadow: 0.2rem 0.2rem 0.6rem #4b4b4b;
	box-shadow: 0.4rem 0.4rem 1rem #4b4b4b;			/* a bit larger for MS IEx */
}

.tblScroll {						/* scroll-container for wide tables */
	width: 100%;
	margin: 0;
	padding: 0;
}

/* provide some space to the table's bottom to allow last row's explanations to be fully displayed - instead of being cut off */
.extra_space,
.bottom_space,
#tblDisplayTranslations {
	margin-bottom: 2rem;
}
.extra_space {
	margin-top: 2rem;
}

td {
	background-color: papayawhip;
}
.byNight td {
	background-color: #303030;		/* very dark gray */
}

tr,
td.top {
	vertical-align: top;
}
td.middle {
	vertical-align: middle;
}

/* specific & fixed cell-width */
th .extra_narrow,
td .extra_narrow {
	min-width: 1rem;
	max-width: 3rem;
}
th .narrow,
td .narrow {
	min-width: 3rem;
	max-width: 6rem;
}
th .medium,
td .medium {
	min-width: 6rem;
	max-width: 10rem;
}
th .wide
td .wide {
	min-width: 10rem;
	max-width: 20rem;
}
th .extra_wide
td .extra_wide {
	min-width: 20rem;
}

th, 
td {
	padding: 0.4rem;
	vertical-align: middle;
	border-right: 0.3rem solid white;	/* aligns the tables' top left to text */
	border-bottom: 0.3rem solid white;
}
th {
	text-align: center;				/* dft */
}
.byNight th {
	color: lightgray;
	background-color: #202020;			/* even more extremely dark gray */
}

td {
	padding-top: 0.2rem;
	padding-bottom: 0.2rem;
	text-align: left;				/* dft */
}
td.center {
    text-align: center;
}
td.right,
th.right {
	text-align: right;
}

th.left {
	text-align: left;
}

th.buffer,
td.buffer {
	padding-right: 1.2rem;
}
/* override this one, else bottom looks exaggerated */
.tblDisplay th.sort {
	padding-bottom: 0;
}
.tblDisplay th.sort a {
	padding:0;
	margin: 0;
}

/* --------------- */
/*  WIDE viewport  */
/* --------------- */
@media (min-width: 40rem) {
	tr {
		background-color: transparent;
	}
	th {
		color: white;
		background-color: #936b08; /* shade of darkgoldenrod */
	}
	/* provide black borders only in wide screen */
	.byNight td,
	.byNight th {
		border-right: 0.3rem solid black;	/* aligns the tables' top left to text */
		border-bottom: 0.3rem solid black;
	}
	/* glossary */
	#page_glossary table {
		width: 100%;
	}
	#page_glossary .tblDisplay th,
	#page_glossary .tblDisplay td {
		vertical-align: top;
	}
	.colHowTo {
		min-width: 20%;
		max-width: 30%;
		width: 25%;
	}

} /* end of WIDE */

/* --------------- */
/* NARROW viewport */
/* --------------- */
@media (max-width: 40rem) {
	/* BREAK table-structure */ 
	/* --------------------- */ 
    table,
    .tblDisplay {
        width: 100%;
        background-color: inherit;
        color: inherit;
    }
	tr {
		background-color: papayawhip;			/* important default for narrow viewports */
        display: block;
		width: 100%;
        padding: 0.4rem;
        margin-bottom: 0.5rem;
		border-radius: 1rem;
		max-width: 100%;
	}
	.byNight tr {
		background-color: #303030;			/* very dark gray */
	}
	.user_input .tblDisplay td,
	.tblDisplay th.td_dtalbl,
	.tblDisplay td {				/* override generic border-settings => hence class-prefix */
		border: none;
	}
	th {
		background-color: papayawhip;
	}
    td {
		display: block;
		padding: 0;
        background-color: inherit;
        color: inherit;
    }
	td .btn {
		vertical-align: top;
	}
	th.td_dtalbl {					/* selective display of th-elements */
        display: block;
		padding: 0.4rem;
	}
    td.center,
    td.right {
        text-align: left;			/* override */
    }
	th.buffer,
	td.buffer {
		padding-right: 0;
		margin: 0; 
	}

    thead,
    .td_hide {
        display: none;
    }
 
	th {
		color: black;
		background-color: #D8EBAD;			/* light olive */
		border: none;
	}
	.byNight th {
		background-color: #303030;			/* very dark gray */
	}


	/* add header's description to each and every cell's content */
    /* to keep this approach language-independent: get the td-itemtype's/title's value */
	/* the class td_dtalbl means that the td's title is being used as content's before */
    th.td_dtalbl:before,
    td.td_dtalbl:before {
        content: attr(data-ax-lbl);
		font-weight: bold;
        display: inline-block;
		min-width: 7rem;
		max-width: 7rem;
		padding-top: 0.4rem;				/* padding-bottom would disrupt the line broken content */
    }
	/* set individual widths */
	#tblHistory td.td_dtalbl:before,
	#tblHistory td.td_dtalbl:before,
	#tblCategory td.td_dtalbl:before,
	#tblCategory td.td_dtalbl:before,
	#tblKeepAlive th.td_dtalbl:before, 
	#tblKeepAlive td.td_dtalbl:before,
	#tblDisplayTranslations th.td_dtalbl:before,
	#tblDisplayTranslations td.td_dtalbl:before {
		min-width: 8rem;
		max-width: 8rem;
	}
/* WEIRD SPACING BEFORE LINKS IN NARROW TABLES */
td a {
	margin-left: 0;	/*no effect*/
}

	/* prevent wrong heading for rankhistory fake-subtitles */
	td.fakeSubtitle:before {
        content: none;
	}

	/* override for calendar-table */
	#tblCalendar {
		display: table;
	}
	#tblCalendar tr {
		display: table-row;
	}
	#tblCalendar tr.hide {
		display: none;
	}
	#tblCalendar th,
	#tblCalendar td {
		display: table-cell;
	}

} /* end of NARROW */

/* ----------------
   hack for Firefox 
   ---------------- */
@media screen and (-moz-images-in-menus:0) {
	td,
	th {
		background-clip: padding-box;
	}
}