/* 
 * DIWATA CSS v1.0
 * Copyright 2024 - Licensed under Ten X Development Corp.
 
 * This design is inspired by Pico CSS (https://picocss.com). 
 * We are grateful for the ideas and concepts it provided, 
 * which have helped shape the elements of our project.
*/

@import url("https://fonts.googleapis.com/css?family=Poppins");

/* Variables */
:root {
  /* Main Color */
  --blue: #004aad;
  --nblue: #003983;
  --lblue: #bfdaff;

  --gray: #585858;
  --lgray: #9eb0c7;
  --dgray: #343434;

  --red: #da4d4d;
  --green: #67bb4e;

  /* Minor colors */
  --m-gray: #dddddd;
  --m-white: #f1f1f1;

  /* Font & Size */
  --main-font: Poppins;
  --regular: 16px;
  --small: 12px;
  --large: 20px;

  /* Common styles */
  --common-padding: 15px 20px;
  --common-margin: 6px 0 16px 0;
  --common-border: 1px solid var(--lgray);
  --common-radius: 5px;

  /* Paddings */
  --small-padding: 0.5em;
  --large-padding: 1.5em;
  --xlarge-padding: 2em;

  /* Margins */
  --small-margin: 0.5em;
  --large-margin: 1.5em;
  --xlarge-margin: 2em;

  /* Table */
  --cell-padding: 10px 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.25;
  margin: 0.5em 0em;
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1rem;
}
h5 {
  font-size: 0.875rem;
}
h6 {
  font-size: 0.75rem;
}

p {
  line-height: 1.5;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

body,
input,
select,
textarea,
button {
  font-family: var(--main-font);
  font-size: var(--regular);
}

/* Form */
form {
  padding: 7px 0px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="color"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="file"],
input[type="number"],
input[type="range"],
input[type="search"],
select,
textarea {
  display: inline-block;
  width: 100%;
  margin: var(--common-margin);
  padding: var(--common-padding);
  border: var(--common-border);
  border-radius: var(--common-radius);
  box-sizing: border-box;
}

/* add focus */
input:focus,
select:focus,
textarea:focus,
.radio-input:checked + .radio-custom {
  border-color: var(--blue);
  box-shadow: 0 0 8px var(--lblue);
  outline: none;
}

/* remove focus */
input[type="range"]:focus,
input[type="file"]:focus {
  border-color: none;
  box-shadow: none;
}

/* grid */
.grid {
  display: flex;
  gap: 1rem;
}

.input-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 50%;
}

/* state validation */
.input-label input[type="text"] {
  width: 100%;
  padding-right: 30px; /* space for icons */
  padding: var(--common-padding);
  border: 1px solid var(--m-gray);
  border-radius: var(--common-radius);
  outline: none;
  box-sizing: border-box; /* this will make sure padding and border are included in width */
}

/* Valid state */
.input-label input:valid {
  border: 1px solid var(--green);
}

.input-label input:valid + .status-icon::after {
  content: "✓";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--green);
}

/* Invalid state */
.input-label input:invalid {
  border: 1px solid var(--red);
}

.input-label input:invalid + .status-icon::after {
  content: "✗";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);
}

/* Disabled state */
.input-label.disabled input {
  background-color: var(--m-white);
  cursor: not-allowed;
}

/* Read-only state */
.input-label.readonly input {
  background-color: #f9f9f9;
}

/* note */
.note {
  margin: 0;
  font-size: smaller;
}

/* textarea */
textarea {
  width: 100%;
}

/* fieldset */
fieldset {
  padding: 0;
  border: none;
}

fieldset label {
  display: block;
}

fieldset legend {
  margin-bottom: 10px;
}

/* radio */
.radio-label {
  position: relative;
  display: block;
  gap: 5px;
  margin-bottom: 8px; /* Space between the labels */
  padding-left: 35px; /* Space for the custom radio */
  font-size: 16px;
  cursor: pointer;
}

.radio-input {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0; /* Hide the default radio */
}

.radio-custom {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--m-white);
  border-radius: 50%; /* Round shape */
  transition: background-color 0.2s;
}

/* When the radio is checked, style the custom radio */
.radio-input:checked + .radio-custom {
  background-color: var(--blue);
}

.radio-input:checked + .radio-custom::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 10px;
  width: 10px;
  background-color: white;
  border-radius: 50%;
}

/* When radio is disabled, style accordingly */
.radio-input:disabled + .radio-custom {
  background-color: var(--lgray);
  pointer-events: none;
}

.radio-label:hover .radio-custom {
  background-color: var(--m-gray);
}

.radio-input:checked:hover + .radio-custom {
  background-color: #456fa0;
}

/* checkbox */
.checkbox-label {
  position: relative;
  display: block; /* This will make each checkbox appear on a new line */
  margin-bottom: 8px; /* Space between the labels */
  padding-left: 30px; /* Space for the custom checkbox */
  font-size: 16px;
  cursor: pointer;
}

.checkbox-input {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0; /* Hide the default checkbox */
}

.checkbox-custom {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: var(--m-white);
  border: 1px solid var(--m-gray);
  border-radius: 5px;
  transition: background-color 0.1s;
}

/* When the checkbox is checked, style the custom checkbox */
.checkbox-input:checked + .checkbox-custom {
  border: none;
  background-color: var(--blue);
}

.checkbox-input:checked + .checkbox-custom::before {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
}

/* When checkbox is disabled, style accordingly */
.checkbox-input:disabled + .checkbox-custom {
  background-color: var(--lgray);
  border: 1px solid #aaa;
  pointer-events: none;
}

.checkbox-label:hover .checkbox-custom {
  background-color: var(--m-gray);
}

.checkbox-input:checked:hover + .checkbox-custom {
  background-color: 456fa0;
}

/* color */
input[type="color"] {
  height: 60px;
  background-color: white;
}

/* file select */
input[type="file"] {
  border: none;
  padding: 5px 20px 15px 0;
}

input::file-selector-button {
  margin-right: 20px;
  padding: 10px 18px;
  border: none;
  border-radius: 5px;
  background-color: var(--gray);
  color: white;
}

input::file-selector-button:hover {
  background-color: var(--dgray);
}

/* range*/
input[type="range"] {
  background: transparent;
  cursor: pointer;
}

/* search */
.search-wrapper {
  position: relative;
  width: 40%;
}

.search-wrapper input[type="text"] {
  border-radius: 50px;
}

.search-input {
  padding: 8px 12px;
  padding-right: 36px; /* space for icon; adjust depending on the size of your image */
  border: none;
  font-size: 16px;
  outline: none;
}

svg {
  cursor: pointer;
}

/* buttons */
button,
a[role="button"] {
  width: 100%;
  margin: 8px 0;
  padding: var(--common-padding);
  border: none;
  border-radius: var(--common-radius);
  background-color: var(--blue);
  color: white;
  cursor: pointer;
  overflow: hidden;
}

button#secondary {
  border: 1px solid var(--m-gray);
  background-color: var(--m-white);
  color: var(--dgray);
}

/* link */
a[role="button"] {
  display: inline-block;
  width: 3rem;
  margin: 8px 0;
  text-align: center;
  text-decoration: none;
}

/* hover */
button:hover,
a[role="button"]:hover {
  background-color: rgb(171, 165, 152);
}

button#secondary:hover {
  background-color: var(--m-gray);
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--regular);
  font-family: var(--main-font);
}

/* Table header styles */
th {
  padding: var(--cell-padding);
  text-align: left;
}

thead th {
  border-bottom: 3px solid var(--m-gray);
}

tfoot th {
  border-top: 3px solid var(--m-gray);
}

/* Table grid */
table[role="grid"] tbody tr:nth-child(odd) {
  background-color: var(--m-white);
}

/* Table body styles */
table[role="grid"] tbody tr:hover {
  background-color: var(
    --m-gray
  ); /* Slightly lighter background on row hover */
}

tbody td {
  padding: var(--cell-padding);
  /* border-bottom: 1px solid var(--m-gray);  */
  /* Bottom border for body cells */
}

/* Transformation texts */
.steps {
  text-align: center;
}

/* test */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: none; /* Initially hidden */
  justify-content: center;
  align-items: center;
}

/* Style for the Close Button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: red;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

/* Edit Button */
.primary a {
  text-decoration: none;
  color: white;
}

/* Drawer button */
.drawer-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

/* For equal width of each span */
/* section.flow.between > span {
  flex: 1;
  text-align: center;
  padding: 10px;
} */

/* Span Width */
.transformation-variable {
  width: 30%;
}

.transformation-code {
  width: 40%;
}

/* NEW FOR CHAT */
.drawer-overview {
  max-width: 300px;
  border-radius: 10px;
  background-color: #f0f0f0;
  padding: 10px;
  position: relative;
  overflow: hidden;
}

.message {
  background-color: #868686;
  color: white;
  padding: 10px;
  border-radius: 10px;
  margin: 5px 0;
}

.user-message {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  margin: 5px 0;
}

.drawer-button {
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}

.avatar-img {
  width: 32px; /* Adjust the desired width */
  height: 32px; /* Adjust the desired height */
  border-radius: 50%; /* To create a circular avatar, if needed */
}