/*
  Tables
*/

table {
  border-collapse: collapse;
}

th, td {
  vertical-align: middle;
  margin: 0;
  padding: 6px;
}

th {
  font-size: 110%;
  text-align: left;
  text-decoration: none;
}

table.shrinkHeadingColumn th {
  white-space: nowrap;
}

table.shrinkHeadingColumn td {
  width: 99%;
}

/* Lists of schools, users, devices, etc. */
.list {
  width: 100%;
  color: var(--list-fore);
}

.list th {
  background: var(--list-heading-back);
  color: var(--list-heading-fore);
  border-top: 1px solid var(--list-heading-border);
  border-left: 1px solid var(--list-heading-border);
  border-bottom: 1px solid var(--list-heading-border);
  padding: 10px;
  font-size: 100%;
}

.list tbody > tr:last-child {
  border-bottom: 1px solid var(--list-heading-border);
}

.list th:first-of-type {
  border-left: none;
}

.list tr:nth-child(odd) {
  background: var(--list-odd-back);
}

.list tr:nth-child(even) {
  background: var(--list-even-back);
}

.list tr:hover {
  background: var(--list-row-back-hover);
}

.list td {
  border-left: 1px solid var(--list-row-border);
}

.list td:first-of-type {
  border-left: none;
}

.list .form {
  margin-top: 20px;
  float: left;
}

.list input[type="text"] {
  width: 15em;
}

.list input[type="submit"] {
  padding: 0;
  margin: 0;
  width: auto;
  height: auto;
  float: right;
}

.list .boolean {    /* Boolean column checkmarks */
  text-align: center;
  display: block;
  font-size: 200%;
}

@media screen and (max-width: 800px) {
  /* Minimize lists */
  .list {
    width: 100%;
  }

  .list .thead,
  .list th {
    display: none;
  }

  .list tbody > tr:last-child {
    border-bottom: none;
  }

  .list tr {
    display: block;
    padding: 2%;
    border-bottom: 1px solid var(--list-row-border);
  }

  .list td {
    display: block;
    padding: 2px;
    border: none;
  }

  .list td:first-of-type {
    font-size: 120%;
    padding: 6px 2px;
  }

  .list td[data-title]:before {
    content: attr(data-title) ":\00A0";
    font-weight: bold;
  }

  .list .tableActions {
    display: inline-block;
  }

  .list .tableActions .btn {
    font-size: 90%;
    padding: 2px 10px;
  }
}

/*
----------------------------------------------------------------------------------------------------
SUPERTABLES
----------------------------------------------------------------------------------------------------
*/

/* The update error message */
.stError {
  background: var(--st-error-bg);
  color: var(--st-error-fg);
  border: 1px solid var(--st-error-border);
  padding: 5px;
}

/* Main container for the table. Use carefully! */
.superTable { }

/* A wrapper DIV around the main table */
.stTableWrapper { }

/* The TABLE element */
.stTable {
  width: 100%;
  background: var(--st-bg);
  color: var(--st-fg);

  /*
  Sticky headers and collapsed cell borders do not mix beautifully; the header cells lose
  their borders. The workaround (read: hack) is to give the table top and right borders...
  */
  border-top: 1px solid var(--st-border);
  border-right: 1px solid var(--st-border);
  border-collapse: separate;
  border-spacing: 0;
}

.stTable td, .stTable th {
  /*
  ...and then set the opposite borders to all cells. Now it looks nice again. I don't know how
  long this hack will continue to work.
  */
  border-bottom: 1px solid var(--st-border);
  border-left: 1px solid var(--st-border);
  padding: 5px;
}

.stFieldset {
  border-top: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-bottom: none;
  padding: 5px 0 0 0;
  margin: 0;
}

.stFieldset > legend {
  margin-left: 10px;
  padding: 0 5px;
}

/*
----------------------------------------------------------------------------------------------------
TABLE HEADER ROWS
----------------------------------------------------------------------------------------------------
*/

.stTable thead {
  /* Make the header cells sticky. Also see the notice above about disappearing cell borders. */
  position: sticky;
  top: 39px;

  /* By default it's all centered */
  text-align: left;
}

.stTable thead tr#controls th {  /* Need a very specific selector, won't work otherwise */
  background: #fff;
  font-size: 100%;
  font-weight: normal;
  margin: 0;
  padding: 5px;
}

.stTable thead tr#controls div#wrap {
}

.stTable thead tr#controls div#top {
}

.stTable thead tr#controls section {
  padding-right: 5px;
  border-right: 1px solid #888;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.stTable thead tr#controls section:last-of-type {
  padding-right: none;
  border-right: none;
}

.stTable thead tr#controls section span {
  white-space: nowrap;
}

.stTable thead tr#controls section label {
  white-space: nowrap;
}

.stTable thead tr#controls section div.arrow {
  /* Don't shift the line contents back and forth */
  min-width: 1em;
  margin-left: 5px;
}

/* Table statistics */
.stTable thead tr#controls section#stats { }

/* A generic container for all sorts of "tools" */
.stTable thead tr#controls div.toolContainer { }

/* Sortable header cells */
.stTable thead tr#headers th {
  background: var(--list-heading-back);
  color: var(--st-header-fg);
}

.stTable thead tr#headers th.sortable:hover {
  background: linear-gradient(rgb(239, 158, 6), rgb(242, 121, 21));
  color: var(--st-sortable-hover-fg);
}

.stTable thead tr#headers th.sorted {
  /* Permanently highlight the currently sorted column */
  background: linear-gradient(rgb(239, 158, 6), rgb(242, 121, 21));
}

/* Column names and sort direction arrows */
.stTable thead tr#headers th div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  pointer-events: none;   /* event pass-through */
}

.stTable thead tr#headers th div span {
  display: inline;
}

.stTable thead tr#headers th div span.arrow {
  margin-left: auto;
  font-family: puavo-icons;
  font-weight: normal;
  padding-left: 5px;
}

/* Pagination controls container */
.stTable thead #paging { }

.stTable thead #paging label {
  font-size: 80%;
}

/*
----------------------------------------------------------------------------------------------------
HEADER CONTROLS
----------------------------------------------------------------------------------------------------
*/

div.checkboxScrollListOuter {
  border: 1px solid var(--st-common-border);
}

div.checkboxScrollListOuter input[type="search"] {
  background: url("/images/magnifier.png") no-repeat scroll 5px center #fff;
  text-indent: 2em;
  border: none;
  border-bottom: 1px solid var(--st-common-border);
  padding: 5px;
  width: 100%;
}

div.checkboxScrollList {
  overflow-x: hidden;
  overflow-y: scroll;
  resize: vertical;
  width: 100%;
  height: 20em;
  max-height: 40em;
  min-height: 10em;
  font-size: 100%;
}

div.checkboxScrollList .item {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  cursor: pointer;
}

div.checkboxScrollList .item { color: var(--st-tab-container-fg); }
div.checkboxScrollList .item:hover { background: var(--st-scroll-list-hover-bg); }

div.checkboxScrollList .item input {
  pointer-events: none;       /* The checkbox is there just for the looks */
  margin-right: 10px;
}

/* Expandable details elements */
.stTable thead summary {
  background: var(--st-summary-bg);
  color: var(--st-summary-fg);
  cursor: pointer;
  padding: 5px;
}

.stTable thead summary:hover {
  background: var(--st-summary-hover-bg);
  color: var(--st-summary-hover-fg);
}

.stTable thead details[open] {
  background: var(--st-details-open-bg);
  color: var(--st-details-open-fg);
}

.stTable thead details[open] > summary {
  background: var(--st-summary-hover-bg);
  color: var(--st-summary-hover-fg);
}

/* Row mass select popup */
div.popupRows { margin: 5px; }

div.popupRows fieldset legend {
  font-size: 100%;
}

div.popupRows div#source {
  border: 1px solid var(--st-border);
  padding: 5px;
  font-size: 100%;
  outline: none;
  font-family: monospace;
  width: 30em;
  max-height: 40em;
  overflow: scroll;
  resize: vertical;
}

div.popupRows .unmatchedRow { background: #faa; }

div.popupRows div#massRowSelectStatus { font-size: 80%; }

/* Column editing popup */
div#popupColumns {
  width: 40em;
  max-width: 40em;
}

div#popupColumns #columnContainer {
  border: 1px solid var(--st-common-border);
  width: 66%;
}

div#popupColumns #columnList .columnName {
  font-style: italic;
  pointer-events: none;
}

div#popupColumns #columnStats {
  margin-top: 20px;
  font-size: 100%;
}

/* Mass tools */
.stTable thead div.toolContainer .massControls {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
}

.stTable thead div.toolContainer div.massControls progress {
  min-width: 250px;
  border-radius: 0;
}

.stTable thead div.toolContainer div.massControls .counter {
  font-weight: bold;
  font-size: 110%;
}

.stTable thead div.toolContainer div.massControls .counter .success {
  background: var(--st-status-success-bg);
  color: var(--st-status-success-fg);
}

.stTable thead div.toolContainer div.massControls .counter .fail {
  background: var(--st-status-fail-bg);
  color: var(--st-status-fail-fg);
}

.stTable thead fieldset#settings div#ui {
  /* Container for the mass tool settings interface */
  margin: 0;
  padding: 0;
}

.stTable thead table {
  border: 1px solid var(--st-border);
}

.stTable thead table tr:hover {
  background: none;
}

/* Hack to make mass tool settings UIs a bit more nicer. This also means that if you actually
need to show tabular data in them, you'll have to live without borders. */
.stTable thead fieldset#settings div#ui table,
.stTable thead fieldset#settings div#ui th,
.stTable thead fieldset#settings div#ui td {
  border: none;
}

/* Filtering */
.stTable thead div#filteringContainer textarea#json.error {
  border: 1px solid red;
}

div.filterList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

/* Traditional filters */
div.filterList .filterBox {
  border-radius: 5px;
  display: flex;
  flex-direction: row;
}

div.filterList .filter {
  border: 1px solid #ccc;
  align-items: stretch;
}

.stTable thead .newFilter {
  border: 1px dashed #888;
  background: none;
  padding: 5px 10px;
  cursor: pointer;
  font-family: "Arial", sans-serif;
  font-size: 110%;
  align-items: center;
}

/* A few special styles for the editable traditional filters */
.stTable thead .editableFilter div {
  padding: 5px;
  cursor: pointer;
}

.stTable thead .editableFilter div.danger {
  background: #fdd;
  border-radius: 0 4px 4px 0;
}

.stTable thead .editableFilter div.danger button {
  border: none;
  background: none;
  color: #f00;
}

.stTable thead .editableFilter div:hover { background: #ddd; }
.stTable thead .editableFilter div.danger:hover { background: #faa; }

.stTable thead .editableFilter input, .editableFilter button {
  pointer-events: none;
}

div.filterList .filter .parts {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

div.filterList .filter span {
  pointer-events: none;
}

div.filterList .filter span.column {
  /* Target column name */
  font-weight: bold;
}

div.filterList .filter span.operator {
  /* Comparison operator */
  font-weight: bold;
  color: var(--st-filters-operator);
}

div.filterList .filter span.value {
  /* Compared value */
  color: var(--st-filters-value);
}

div.filterList .filter span.empty {
  /* Indicate an empty/missing value */
  font-style: italic;
  color: var(--st-filters-value);
}

.traditionalPopup div#upper {
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}

.traditionalPopup div#upper button {
  white-space: nowrap;
}

.traditionalPopup div#upper button#save i { color: var(--st-filters-save-icon); }
.traditionalPopup div#upper button#cancel i { color: var(--st-filters-cancel-icon); }

.traditionalPopup div#editor p.help {
  /* Prevent long help texts from stretching the popup to ridiculous widths */
  max-width: 30em;
}

.stTable thead div#advanced span.unsaved {
  color: var(--st-filters-unsaved-fg);
}

.stTable thead div#advanced table.messages tr {
  cursor: pointer;
}

.stTable thead div#advanced table.messages .error {
  background: var(--st-filters-error-bg);
  color: var(--st-filters-error-fg);
}

/*
The entire supertable control section is inside a table header element, and now we'll put
a *TABLE* in there... have to undo some of the supertable styles.
*/
.commonTable, .commonTable th, .commonTable td {
  border: 1px solid var(--st-border) !important;
}

.commonTable th, .commonTable td {
  padding: 5px;
}

.commonTable thead {
  position: static !important;
  top: auto !important;
}

.commonTable th {
  background: var(--st-commontable-th-bg) !important;
  color: var(--st-commontable-th-fg) !important;
}

/* I don't know why I am doing this */
div#filteringPreview span.par { color: #088; }
div#filteringPreview span.bool { color: #00f; margin: 0 5px; }
div#filteringPreview span.neg { color: #fff; background: #f00; }
div#filteringPreview span.cmp { padding: 2px; }
div#filteringPreview span.col { font-weight: bold; }
div#filteringPreview span.opr { color: #808; margin: 0 5px; }
div#filteringPreview span.val-b { color: #f00; }
div#filteringPreview span.val-n { color: #f00; }
div#filteringPreview span.val-t { color: #00f; }
div#filteringPreview span.val-s { color: #0a0; }
div#filteringPreview span.val-r { color: #f40; }
div#filteringPreview span.val-o { color: #888; }

/*
----------------------------------------------------------------------------------------------------
TABLE BODY ROWS
----------------------------------------------------------------------------------------------------
*/

.stTable tbody td {
  padding: 5px;
  font-size: 10pt;
}

/* Row hover and row state interactions */
.stTable tbody .sorted { background: var(--st-row-sorted-column); }
.stTable tbody tr:hover { background: var(--st-row-hover-bg); }
.stTable tbody tr:hover .sorted { background: var(--st-row-sorted-hover-bg); }

.stTable tbody tr.processing { background: var(--st-row-processing-bg); color: var(--st-row-processing-fg) !important; }
.stTable tbody tr.processing:hover { background: var(--st-row-processing-hover-bg) !important; }
.stTable tbody tr.processing .sorted { background: var(--st-row-processing-sorted-bg); }
.stTable tbody tr.processing:hover .sorted { background: var(--st-row-processing-sorted-hover-bg) !important; }

.stTable tbody tr.success {
  background: var(--st-row-success-bg);
  color: var(--st-row-processed-fg) !important;
}

.stTable tbody tr.success:hover { background: var(--st-row-success-hover-bg) !important; }
.stTable tbody tr.success .sorted { background: var(--st-row-success-sorted-bg); }
.stTable tbody tr.success:hover .sorted { background: var(--st-row-success-sorted-hover-bg) !important; }

.stTable tbody tr.fail {
  background: var(--st-row-fail-bg);
  color: var(--st-row-processed-fg) !important;
}

.stTable tbody tr.fail:hover { background: var(--st-row-fail-hover-bg) !important; }
.stTable tbody tr.fail .sorted { background: var(--st-row-fail-sorted-bg); }
.stTable tbody tr.fail:hover .sorted { background: var(--st-row-fail-sorted-hover-bg) !important; }

/* Row checkboxes */
.stTable .headerCheckbox {
  display: block;
  width: 20px;
  height: 20px;
}

.stTable .checkbox {
  /* Prevent text/table cell selections during range selections */
  user-select: none;
}

.stTable .checkbox span {
  border: 1px solid var(--st-checkbox-border);
  display: block;
  width: 20px;
  height: 20px;
  background: var(--st-checkbox-bg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  pointer-events: none;
}

.stTable .checkbox span.checked {
  background-image: url("/images/cross.svg");
  background-color: var(--st-checkbox-bg);
  background-size: 80%;
}

/* The previously selected row indicator */
.stTable .previousRow {
  outline: 2px dotted var(--st-previous-row);
}

/* Supertable cell header drag item */
.stDragHeader {
  background: var(--st-sortable-hover-bg);
  color: var(--st-sortable-hover-fg);
  border: 1px solid var(--st-border);
  position: absolute;
  display: flex;
  align-items: center;
  padding: 5px;
  margin: 0;
  font-weight: bold;
  z-index: 10;
  cursor: grabbing;
  opacity: 0.7;
  user-select: none;
}

/* Supertable drop target position indicator */
.stDropMarker {
  background: var(--st-dropmarker);
  border: none;
  position: absolute;
  width: 5px;
  display: block;
  z-index: 9;
}

/*
div.popup p, div.popup label {
    font-size: 80%;
}
*/

div.popup div#presets p.help {
  margin: 0;
  padding: 0;
  max-width: 40em;
}

/*
----------------------------------------------------------------------------------------------------
SORTABLE TABLES
Not the SuperTable, but the older simpler sortable table that is used in many places
where filtering and mass tools aren't needed.
----------------------------------------------------------------------------------------------------
*/

/* Sortable column headers. Each TH element contains a flexbox DIV that
   contains two spans: one for the title, one for the sort direction
   arrow. Flexbox is used because I want to right-align the sort arrow
   and a flexbox is the only way to do that even somewhat reliably. */
.sortHeader {
  cursor: pointer;
}

.sortHeader:hover {
  background: var(--list-sortable-column-hover);
}

  /* The container DIV */
.sortHeader div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  /*
    What JavaScript taketh, CSS giveth. What a mess...
    https://css-tricks.com/slightly-careful-sub-elements-clickable-things/
  */
  pointer-events: none;
}

/* The child spans */
.sortHeader div .title {
  display: inline;
}

.sortHeader div .arrow {
  display: inline;
  margin-left: auto;    /* right-align the arrow */

  /* Common styles for all arrow DIVs. Note that each style has its own left padding (see below). */
  font-family: puavo-icons;
  font-size: 120%;
  font-weight: normal;
  padding-right: 10px;
}

/* Setup the sort direction arrows */
.orderAscending, .orderDescending {
  background: var(--list-sortable-column-hover) !important;
}

.orderNone .arrow:after {
  padding-left: 10px;
  content: "\f0dc";       /* up arrow, down arrow */
}

.typeString.orderAscending .arrow:after {
  padding-left: 5px;
  content: " \f15d";      /* A -> Z */
}

.typeString.orderDescending .arrow:after {
  padding-left: 5px;
  content: " \f15e";      /* Z -> A */
}

.typeNumeric.orderAscending .arrow:after {
  padding-left: 6px;
  content: " \f162";      /* 1 -> 9 */
}

.typeNumeric.orderDescending .arrow:after {
  padding-left: 6px;
  content: " \f163";      /* 9 -> 1 */
}

tr:nth-child(odd) .selectedColumn {
  background: var(--list-sortable-odd-selected-back);
}

tr:nth-child(even) .selectedColumn {
  background: var(--list-sortable-even-selected-back);
}

tr:hover .selectedColumn {
  background: var(--list-sortable-selected-column-back) !important;
}
