@import url(./button.css);
@import url(./time-table.css);
@import url(./sum-table.css);
@import url(./user-table.css);

html,
body {
  height: 100%;
  margin: 0;
  font-size: 16px;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
}

#root {
  height: 0;
  flex-grow: 1;
  padding: 0.5rem;
  overflow: auto;

  display: flex;
  flex-direction: column;
}

.title {
  margin: 0;
  text-align: center;
  letter-spacing: 0.5rem;
  padding: 3px 5px;
}

.title[data-type="blue"] {
  background-color: #9bc2e6;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.table-wrapper {
  overflow: auto;
  height: 0;
  flex-grow: 1;
}

table {
  border-spacing: 0;
  border-collapse: separate;
  --border-color: #ccc;
  --hover-color: #ebdef0;
  --focus-color: #a2d9ce;
  margin-bottom: 0.5rem;
}
table td,
table th {
  background-color: white;
  padding: 3px 5px;
  border-bottom: 1px solid var(--border-color);
  border-left: 1px solid var(--border-color);
}
table thead > tr:first-child > td {
  border-bottom: 3px double var(--border-color);
}
table thead > tr:first-child > td {
  border-top: 1px solid var(--border-color);
}

table thead td,
table thead th {
  text-align: center;
}

table td:last-child,
table th:last-child {
  border-right: 1px solid var(--border-color);
}
table[data-width="full"] {
  width: 100%;
}
table tbody tr:last-child > td {
  border-bottom: none;
}
table tfoot td {
  border-top: 3px double var(--border-color);
}

table input {
  width: 100%;
}

table td.right {
  text-align: right;
}
table td.center {
  text-align: center;
}

td:has(img[alt="check"]) {
  text-align: center;
}
img[alt="check"],
img[alt="un-check"] {
  display: none;
}

img[alt="check"]:has(+ img + input[name="selected"][value="true"]) {
  display: inline;
}
img[alt="un-check"]:has(+ input[name="selected"]:not([value="true"])) {
  display: inline;
}

.hidden {
  display: none;
}

form#header {
  display: flex;
  align-items: center;
  background-color: #9bc2e6;
  justify-content: space-between;
  padding: 0.25rem 1rem;
  overflow: hidden;
  gap: 0.5rem;
}

form#header > button:first-child {
  font-size: 0;
}

form#header h2 {
  margin: 0;
}
form#header > h1 {
  width: 0;
  flex-grow: 1;
  white-space: nowrap;
  min-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

form#header > span {
  display: none;
}

input {
  font-size: 16px;
}

form#login {
  width: 100%;
  padding: 0 1rem;
  height: 100%;
}

form#login > h3 {
  background-color: #9bc2e6;
  margin: 0;
  padding: 1rem;
  margin-bottom: 0.5rem;
}

form#login {
}

@media (min-width: calc(400px + 2rem)) {
  form#login {
    width: 400px;
  }
}

@media (min-width: 700px) {
  input {
    font-size: revert;
  }

  form#header > button:first-child {
    font-size: revert;
  }
  form#header > span {
    display: inline-block;
  }
}

.label-pair > label:has(+ input:focus) {
  font-weight: bold;
}

button[name="page"][value="0"] {
  background: red;
}

body[data-lock="true"] button {
  opacity: 0.6;
  pointer-events: none;
}
button.button-disabled {
  opacity: 0.6;
  pointer-events: none;
}

#tooltip {
  display: none;
}

#tooltip.visible {
  z-index: 100000000000;
  display: block;
  position: absolute;
  content: attr(data-title);
  font-size: 0.8rem;
  background-color: #fef9e7;
  /* white-space: nowrap; */
  max-width: 300px;
  border: 1px solid black;
  top: calc(var(--tooltip-top, 0));
  left: calc(var(--tooltip-left, 0) + 20px);
  padding: 5px;
  -webkit-box-shadow: 5px 5px 5px -4px rgba(0,0,0,0.55);
  -moz-box-shadow: 5px 5px 5px -4px rgba(0,0,0,0.55);
  box-shadow: 5px 5px 5px -4px rgba(0,0,0,0.55);
}

td:has([data-key="jobCode"]) + td > input,
[data-key="jobName"] > input {
  width: 5rem;
  margin-left: 0.5rem;
}


body[data-dirty="true"] button#lock {
  opacity: 0.6;
  pointer-events: none;
}






table.member-calc > thead td {
  background-color: #fce4d6
}
table.member-calc tr.total > td,
table.member-calc tr.all-total > td { border-bottom: 1px solid var(--border-color);}
table.member-calc tr.all-total > td { border-top: 1px solid var(--border-color);}
table.member-calc tr.total > td:first-child,
table.member-calc tr.all-total > td:first-child {
  border:none; 
}

body[data-dirty="true"]:has(table.member-calc) button#save::after {
  content: "*" ;
  color: red;
}
body[data-dirty="false"]:has(table.member-calc) button#save {
  opacity: 0.6;
  pointer-events: none;
}



#lock + #requesting + #un-lock, 
#lock + #requesting:has( + #un-lock), 
#lock:has( + #requesting + #un-lock) {
  display:none;
}
#lock[data-status="1"] + #requesting + #un-lock,
#lock[data-status="2"] + #requesting:has( + #un-lock),
#lock[data-status="3"]:has( + #requesting + #un-lock) {
  display:inline;
}

#banner {
  position:absolute;
  top: 80px;
  width: 500px;
  background-color:yellow;
  right:1.5rem;
  padding: 0.5rem;
-webkit-box-shadow: 10px 10px 5px 0px rgba(209,202,71,1);
-moz-box-shadow: 10px 10px 5px 0px rgba(209,202,71,1);
box-shadow: 10px 10px 5px 0px rgba(209,202,71,1);
}

body#member-calc:has(button#lock[data-status="1"]) tbody input,
body#member-calc:has(button#lock[data-status="2"]) tbody input,
body#member-calc:has(button#lock[data-status="1"]) #save,
body#member-calc:has(button#lock[data-status="1"]) button:has(img[alt="add"]),
body#member-calc:has(button#lock[data-status="1"]) button:has(img[alt="delete"]),
body#member-calc:has(button#lock[data-status="2"]) #save,
body#member-calc:has(button#lock[data-status="2"]) button:has(img[alt="add"]),
body#member-calc:has(button#lock[data-status="2"]) button:has(img[alt="delete"]) {
  opacity: 0.6;
  pointer-events: none;
}