/*
Copyright (C) 2025 Malcolm

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
/* 
 *    The core css
 */

:root {
  --main-bg-color: #f1f1f1;
  --item-color: #ccc;
  --hover-color: #ddd;
  --query-bg-color: #B0C4DE;
  --query-hover-color: #87CEFA;
  --detail-color: #dcdcdc;
  --check-td-color: #e5e7eb;
  --check-thdg-color: #1e3a8a;
  --modal-bg-color: #fefefe;
  --modal-border-color: #888;
  --modal-outer_bg-color: rgba(0,0,0,0.4);
  --check-row-bg-odd: #b8d1f3;
  --check-row-bg-even: #dae5f4;
  --check-bg-hover: #FFFACD;
  --detail-bg-hover: #FFFACD;
  --check-text-head-color: white;
  --check-text-color: black;
}

body {
    background-color: var(--main-bg-color);
}

/* The container structure and definitions. */
.container {
  display: grid;
  grid-template-columns: 24% 24% 24% 24%;
  grid-template-rows: 20px 500px 320px 20px;
  gap: 5px;
  background-color: var(--main-bg-color);
  padding: 5px;
}

.item {
  border: 1px solid var(--item-color);
  padding-left: 5px;
  padding-right: 5px;
}
.item-head {
  grid-column: 2/ span 2;
  text-align: center;
}
.item-user {
  text-align: right;
}

.item-tab {
  grid-column: 3 / span 2;
}

.item-search {
  grid-column: 1 / span 4;
}

.item-error {
  grid-column: 1 / span 4;
}

/* The tabs styles. */
.tab {
  overflow: hidden;
  border: 1px solid var(--item-color);
  background-color: var(--main-bg-color);
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 5px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: var(--hover-color);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--item-color);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid var(--item-color);
  border-top: none;
}

.tablinks {
  text-align:center;
  height: 25px;
}

/* Fixed data style */
.detailfixed {
  color: var(--detail-color);
}

/* Query button style */
.query {
  background-color: var(--query-bg-color);
  width: 100%;
}

.query:hover {
  background-color: var(--query-hover-color);
}

/* Table css */

/* Table css */
.check {
  overflow: auto;  
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

.check th
.check td {
  padding: 8px;
  text-align: center;
  border: 1px solid var(--check-td-color);
}

.check th {
  background-color: var(--check-thdg-color);
  color: var(--check-text-head-color);
  font-size: 14px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

.check td {
  font-size: 14px;
  color: var(--check-text-color);
}


.check th:nth-child(1) {
  position: sticky;
  left: 0;
  color: var(--check-text-head-color);
}

.check tr:nth-child(odd){ 
	background: var(--check-row-bg-odd);
}

.check tr:nth-child(even){
	background: var(--check-row-bg-even);
}

.check tr:hover {
  background-color: var(--check-bg-hover);
}

.detailOver:hover {
  background-color: var(--detail-bg-hover);
}

.detailTable {
    border-collapse: collapse;
    width: 100%;
}

.tabtab {
  height: 450px;
  overflow-y: scroll;
}

.searchSize {
  height: 300px;
  overflow-y: scroll;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: var(--modal-outer-bg-color);
}

.modal-content {
  background-color: var(--modal-bg-color);
  margin: auto;
  padding: 20px;
  border: 1px solid var(--modal-border-color);
  width: 60%;
}

.wide {
  width: 100%;
}

.big {
  width: 100%;
  height: 200px;
}