/* Default table settings  */

/* Show sorting indicators */
table.table thead th.orderable      { background: url('../img/sort_both.png') no-repeat center right; }
table.table thead th.asc.orderable  { background: url('../img/sort_asc.png')  no-repeat center right; background-color:lightcyan; }
table.table thead th.desc.orderable { background: url('../img/sort_desc.png') no-repeat center right; background-color:lightcyan; }

/* BrigadeCertification: centre all fields except leftmost 2 */
/* TODO: default alignment is left. Set n+3 to center in one line */
#brigcerts > thead > tr > th { text-align:center!important; }
#brigcerts > thead > tr > th:nth-child(1) { text-align:left!important; }
#brigcerts > thead > tr > th:nth-child(2) { text-align:left!important; }
#brigcerts > thead > tr > th:nth-child(3) { text-align:left!important; }
#brigcerts > tbody > tr > td { text-align:center!important; }
#brigcerts > tbody > tr > td:nth-child(1) { text-align:left!important; }
#brigcerts > tbody > tr > td:nth-child(2) { text-align:left!important; }
#brigcerts > tbody > tr > td:nth-child(3) { text-align:left!important; }
#brigcerts > tfoot > tr > td { text-align:center!important;  font-weight: bold; }
#brigcerts > tfoot > tr > td:nth-child(1) { text-align:left!important; }
#brigcerts > tfoot > tr > td:nth-child(2) { text-align:left!important; }
#brigcerts > tfoot > tr > td:nth-child(3) { text-align:left!important; }

/* BrigadeSkills: centre all fields except leftmost 2 */
/* TODO: default alignment is left. Set n+3 to center in one line */
#brigskills > thead > tr > th { text-align:center!important; }
#brigskills > thead > tr > th:nth-child(1) { text-align:left!important; }
#brigskills > thead > tr > th:nth-child(2) { text-align:left!important; }
/*#brigskills > thead > tr > th:nth-child(3) { text-align:left!important; }*/
#brigskills > tbody > tr > td { text-align:center!important; border-left: 1px solid;!important;}
#brigskills > tbody > tr > td:nth-child(1) { text-align:left!important; }
#brigskills > tbody > tr > td:nth-child(2) { text-align:left!important; }
/*#brigskills > tbody > tr > td:nth-child(3) { text-align:left!important; }*/
#brigskills > tfoot > tr > td { text-align:center!important;  font-weight: bold; border-left: 1px solid;!important;}
#brigskills > tfoot > tr > td:nth-child(1) { text-align:left!important; }
#brigskills > tfoot > tr > td:nth-child(2) { text-align:left!important; }
/*#brigskills > tfoot > tr > td:nth-child(3) { text-align:left!important; }*/



/* This is needed when using fixed-navbar to give offset from top of page */

/*TODO this shouldn't really be here, and prob can be set instead in base.html under site_css ?? */

body, html {
  /*height: 100vh; !* Fallback for browsers that do not support Custom Properties: see https://css-tricks.com/the-trick-to-viewport-units-on-mobile/  *!*/
  /*height: calc(var(--vh, 1vh) * 100);         This needs some js to set value of variable vh */
  /*min-height: 100vh;*/
  /*min-height: -webkit-fill-available;*/
  /* See Fill Available, in https://dev.to/cydstumpel/4-things-in-web-development-i-ve-learned-in-2020-so-far-3cg */
  height: 100vh;
  height: -webkit-fill-available;
  height: fill-available;
  margin: 0;            /* 1rem; */
  padding-top: 3vh;    /* 1rem 5rem;        !* top, right and left, bottom. Note that padding used for navbar is 20px (in base_generic), so make top slightly bigger. */
  /*padding-left: 10px;*/
}

/* Define these in tables.py definition, using attrs */

#membcert > thead > tr > th:nth-child(4) { text-align:center!important; }
#membcert > thead > tr > th:nth-child(5) { text-align:center!important; }
#membcert > tbody > tr > td:nth-child(4) { text-align:center!important; }
#membcert > tbody > tr > td:nth-child(5) { text-align:center!important; }

#typecert > thead > tr > th:nth-child(5) { text-align:center!important; }
#typecert > thead > tr > th:nth-child(6) { text-align:center!important; }
#typecert > tbody > tr > td:nth-child(5) { text-align:center!important; }
#typecert > tbody > tr > td:nth-child(6) { text-align:center!important; }

/* Experimental conditional formatting: see https://support.awesome-table.com/hc/en-us/articles/115001399529-Use-CSS-to-change-the-style-of-each-row-depending-on-the-content */
/*.bcstatus[data-status="Y"]:after {*/
/* content : "Yb";*/
/* background-color : lightgreen;*/
/*}*/

/*.bcstatus[data-status=""]:after {*/
/* content : "Nb";*/
/* background-color : lightcoral;*/
/*}*/

/*************************************************************************** */

.officer-table td.officerbold   { font-weight:bold; }             /* Use descendant selector (space), not child '>' */
.officer-table td.officernormal { font-weight:normal; }
.officer-table                  { width: 75%; }

.basicofficer-table td.officerbold   { font-weight:bold; }             /* Use descendant selector (space), not child '>' */
.basicofficer-table td.officernormal { font-weight:normal; }

.basicofficer-table             { width: 100%; font-size: 0.9rem; }

.table-sm td, th                { padding: 0.1rem; }           /* default for table-sm is .3rem */

/* Member list : tables.MemberTable, views.MemberTables, fullmember_list.html */

/* Use monospace font for qualifications to force alignment */
#memberlist > tbody td:nth-child(1) { font-family: Consolas, Lucida Console, monospace !important; }         /* Qualifications */
/* to use headers, need to set both attrs={'th': {'id': 'qual_summ',}, 'td': {'headers': 'qual_summ'}} in tables.Column. Not worth it
/*#memberlist > tbody td[headers="qual_summ"] { font-family: Consolas, Lucida Console, monospace !important; }         !* Qualifications *!*/

/* Set widths for each column. <td> inherits this from <th> in this case */
/* Note bootstrap col-sm-* doesn't work on Chrome, so use % instead */
/* See https://stackoverflow.com/questions/15115052/how-to-set-up-fixed-width-for-td */
#memberlist > thead th:nth-child(1) { width: 15%; }     /* Qualifications */
#memberlist > thead th:nth-child(2) { width: 5%;  }     /* Active */
#memberlist > thead th:nth-child(3) { width: 10%;  }    /* Rank */
#memberlist > thead th:nth-child(4) { width: 5%;  }    /* rfsID */
#memberlist > thead th:nth-child(5) { width: 13%; }     /* Name */
#memberlist > thead th:nth-child(6) { width: 10%; }     /* Mobile */
#memberlist > thead th:nth-child(7) { width: 17%; }     /* email */
#memberlist > thead th:nth-child(8) { width: 10%; }     /* Home ph */
#memberlist > thead th:nth-child(9) { width: 10%; }     /* Work ph */

#memberlist > thead th:nth-child(2) { text-align : center;}     /* Active */
#memberlist > tbody td:nth-child(2) { text-align : center;}     /* Not inherited from <th> */

/*Covid event attendance list*/

#covidlist { margin-left: 50px; margin-right: 50px; border:1px solid #15397f; padding-right: 10px;}

#covidlist > thead > tr > th { background: #15397f; vertical-align: middle; color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 15px}     /* Date */

#covidlist > tbody > tr > td { font-family: Arial, Helvetica, sans-serif; font-size: 14px; border:1px solid #15397f;}

#covidlist > thead th:nth-child(1) { width: 15%; }     /* Date */
#covidlist > thead th:nth-child(2) { width: 20%; }     /* First Name */
#covidlist > thead th:nth-child(3) { width: 20%;  }    /* Surname */
#covidlist > thead th:nth-child(4) { width: 15%; }     /* Phone Number */
#covidlist > thead th:nth-child(5) { width: 15%; }     /* Arrival Time */
#covidlist > thead th:nth-child(6) { width: 15%; }     /* Departure Time*/

/* Brigade Activity Log */

#brigactlog > thead th:nth-child(1) { width: 10%; text-align:center; }    /* Date */
#brigactlog > thead th:nth-child(2) { width: 5%; text-align:center; }     /* Start Time */
#brigactlog > thead th:nth-child(3) { width: 5%; text-align:center; }     /* Finish Time */
#brigactlog > thead th:nth-child(4) { width: 15%; }     /* Activity */
#brigactlog > thead th:nth-child(5) { width: 8%; text-align:center; }     /* Man Hours */
#brigactlog > thead th:nth-child(6) { width: 6%; text-align:center; }     /* Num crew */
#brigactlog > thead th:nth-child(7) { width: 25%; }     /* Attendees */
#brigactlog > thead th:nth-child(8) { width: 26%; }     /* Comments */

#brigactlog > tbody > tr > td:nth-child(1)  { text-align:center !important; }
#brigactlog > tbody > tr > td:nth-child(2)  { text-align:center !important; }
#brigactlog > tbody > tr > td:nth-child(3)  { text-align:center !important; }
#brigactlog > tbody > tr > td:nth-child(5)  { text-align:center !important; }
#brigactlog > tbody > tr > td:nth-child(6)  { text-align:center !important; }

#brigactlog tr td:first-child, #brigactlog tr th:first-child { white-space: nowrap!important; }

/* Brigade activity summary */

.brigadeactsumm-table                  { width: 50%; }

#brigactsumm > thead tr:nth-child(1)        { width: 10%; text-align:center !important; }                       /* Category */
#brigactsumm > thead tr:nth-child(2)        { width: 5%;  text-align:center !important; }     /* # Events */
#brigactsumm > thead tr:nth-child(3)        { width: 5%;  text-align:center !important; }     /* # man hours */

#brigactsumm > tbody > tr > td:nth-child(1)  { width: 10%; text-align:left !important; }
#brigactsumm > tbody > tr > td:nth-child(2)  { width: 5%;  text-align:center !important; }
#brigactsumm > tbody > tr > td:nth-child(3)  { width: 5%;  text-align:center !important; }

#brigactsumm > tfoot tr:nth-child(1)        { width: 10%; text-align:center !important; font-weight:bold; }
#brigactsumm > tfoot tr:nth-child(2)        { width: 5%;  text-align:center !important; font-weight:bold; }
#brigactsumm > tfoot tr:nth-child(3)        { width: 5%;  text-align:center !important; font-weight:bold; }

/* Annual event attendance list*/

#annuallist th, td {  border: none;}
#annuallist.table  {  border: 2px solid black; }

#annuallist > tbody > tr > td.top-border        { border-top:  solid; }
/*#annuallist > tbody > tr > td.left-border       { border-left: solid; }*/
#annuallist > tbody > tr > td.no-top-border     { border-top:  none; }

#annuallist > thead > tr > th               { text-align:center; } /* border-left: solid; } */
#annuallist > thead > tr > th:nth-child(2)  { text-align:left;  border-left: solid;}
#annuallist > thead > tr > th:nth-child(3)  { text-align:left; }
#annuallist > thead > tr > th:nth-child(4)  { text-align:left; }
#annuallist > thead > tr > th:nth-child(5)  { border-left: solid; }
#annuallist > thead > tr > th:nth-child(6)  { text-align:left; }

/* Needed because td doesn't seem to inherit from th */
#annuallist > tbody > tr > td               { text-align:center !important }
#annuallist > tbody > tr > td:nth-child(2)  { text-align:left !important; border-left: solid; }
#annuallist > tbody > tr > td:nth-child(3)  { text-align:left !important }
#annuallist > tbody > tr > td:nth-child(4)  { text-align:left !important }
#annuallist > tbody > tr > td:nth-child(5)  { border-left: solid; }
#annuallist > tbody > tr > td:nth-child(6)  { text-align:left !important }

#annuallist > thead th:nth-child(1) { width: 10%; }     /* Date */
#annuallist > thead th:nth-child(2) { width: 13%; }     /* OIC */
#annuallist > thead th:nth-child(3) { width: 15%; }     /* Type */
#annuallist > thead th:nth-child(4) { width: 33%;  }    /* Details */
#annuallist > thead th:nth-child(5) { width: 8%; }      /* Arrival Time */
#annuallist > thead th:nth-child(6) { width: 13%; }     /* Member */
#annuallist > thead th:nth-child(7) { width: 8%; }      /* Departure Time*/


/* Member activity table settings */

#memberactivity > thead > tr > th               { text-align:center; }
#memberactivity > thead > tr > th:nth-child(1)  { text-align:left; }

#memberactivity > tbody > tr > td > a           { color: blue;  }
#memberactivity > tbody > tr > td               { text-align:center !important }
#memberactivity > tbody > tr > td:nth-child(1)  { text-align:left !important; }

#memberactivity > tbody > tr > td.warning       { background-color:pink   !important }
#memberactivity > tbody > tr > td.marginal      { background-color:yellow !important }
#memberactivity > tbody > tr > td.ok            { }

#memberactivity > tfoot > tr > td               { text-align:center; }
#memberactivity > tfoot > tr > td:nth-child(1)  { text-align:left; font-weight:bold; }

/* Used for Key section in memberactivity table */
.flex-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
      column-gap: 20px;
}
.flex-item {
       flex: auto;
      font-weight: bold;
}

/* Used for KEY in member activity list */
.activity-key {
    margin-bottom: 10px;
    color: white;
    background: blue;
    border: 1px solid black;
    border-radius: 10px;
}

/* Vehicle movements table*/

#vehactivity > thead > tr > th                  { text-align:center; }
#vehactivity > thead > tr > th:nth-child(1)     { text-align:left; }

#vehactivity > tbody > tr > td                  { text-align:center; }      /* Doesn't seem to inherit this from th like #memberactivity ?? */
#vehactivity > tbody > tr > td:nth-child(1)     { text-align:left; }
#vehactivity > tbody > tr > td > a              { color: blue;  }

#vehactivity > tfoot > tr > td                  { text-align:center; }
#vehactivity > tfoot > tr > td:nth-child(1)     { text-align:left; font-weight:bold; }


/* Set responsive column widths for GroupEvent formsets */
#GroupEventView_table   { width: 50%; }
#eventtcard             { width: 60%; }


/* TODO be careful with this!! */
@media (max-width: 768px) {
#GroupEventView_table   { width: 100%; }
#eventtcard             { width: 100%; }
}

/*************************************************************************** */

/* Member activity : tables.ActivityTable, views.DisplayActivity, eventattendance_list.html */

table.memberevents td             { padding-top: 2px; padding-bottom: 2px; }      /* Not sure why this is needed */

/********************************************************************************/

/* Member qualifications : tables.Memb_qualifications, views.manage_quals, manage_quals.html */

table.memberquals                   { width: 75%;  }
table.memberquals th.qual_id        { width : 400px; }
table.memberquals td.qual_id        { text-align: left; }

/********************************************************************************/

/* Member attendance list : tables.Event_Attendances, views.EventAttendanceTable, eventmemb_list.html */

table.memberattendance              { width: 100%;  }
table.memberattendance th.Details   { width :  250px; }
table.memberattendance td.Details   { text-align: left; }
table.memberattendance th.eDate     { width : 14ch; }
table.memberattendance th.Type      { width : 16ch; }

#eventatt2 tr td:nth-child(2) { width : 20ch; }     /* OIC */
#eventatt2 tr td:nth-child(4) { width : 14ch; }     /* Type */

#eventatt1.table th.Details   { width : 250px; }
#eventatt1.table td.Details   { text-align: left; }
#eventatt1.table th.eDate     { width : 14ch; }
#eventatt1.table th.Type      { width : 16ch; }

/********************************************************************************/

/* Vehicle movements list : tables.Veh_movements, views.Veh_movementTable, vehmov_list.html */

table.vehmovement th.Purpose        { width : 50px; }
table.vehmovement th.Location       { width : 300px; }
table.vehmovement td.Location       { text-align: left; }
table.vehmovement th.OIC            { width : 150px; }
table.vehmovement th.DRIVER         { width : 150px; }
table.vehmovement th.Date           { width : 120px; }


/********************************************************************************/

/* Replace explicit <style> in tables.py with class for CSP */

a.cblue             { color: blue; }                /* astyle = 'color: blue;' */
a.cgray             { color: gray; }

td.txtdec-line      { text-decoration: line-through;}            /*column.attrs = {'td': {'style': 'text-decoration:line-through;'}}*/

div.qcoral           { background-color:lightcoral; }            /* ""background-color:lightcoral;";" */
div.qgreen           { background-color:lightgreen; }            /* ""background-color:lightcoral;";" */

th.thcenter         { text-align: center;}                      /*     center_col = {'th': {'style':'text-align: center;'}, 'td': {'align': 'center'}} ?? original incorrect */
td.tdcenter         { text-align: center; }


div.ygreen          { background-color:lightgreen;text-align:center; }      /*astyle = "background-color:lightgreen;text-align:center;" if value == 'Y' else ''*/
a.yblue             { color: blue;text-align:center; }                      /*astyle = 'color: blue;text-align:center;'*/

div.skdate          { text-align:center; }

  /*astyle = "background-color:lightgreen;text-align:center;" if value.isupper() else "background-color:lightcoral;text-align:center!important;" if value.islower() else ''*/
div.rgreen          { background-color:lightgreen;text-align:center; }
div.rcoral          { background-color:lightcoral;text-align:center!important; }

td.kwarning         { background-color:pink   !important }
td.kmarginal        { background-color:yellow !important }

caption.cstop       { caption-side: top; }

h3.mlhead           { width: 100%; margin-top: 10px;}               /*style="width: 100%; margin-top: 10px;" */