/* /css/piket.css */

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: Arial, sans-serif;
 transition: all 0.1s ease-in-out;
}

.hide {
 display: none;
}

/* ! Big Loading Screen */
.bigLoadingScreen {
 position: fixed;
 z-index: 1000;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.8);
 /* Semi-transparent background */
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-family: Arial, sans-serif;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.5s ease-in-out, visibility 0.5s;
}

.bigLoadingScreen.show {
 opacity: 1;
 visibility: visible;
}

/* Centering the content */
.loadingContent {
 text-align: center;
}

/* Loading Spinner Effect */
.spinner {
 margin: 20px auto;
 width: 50px;
 height: 50px;
 border: 5px solid rgba(255, 255, 255, 0.3);
 border-top-color: #ffffff;
 border-radius: 50%;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 from {
  transform: rotate(0deg);
 }

 to {
  transform: rotate(360deg);
 }
}

/* ! Maintance */
.maintainceScreen {
 z-index: 5;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.maintainceScreen,
.refreshTable {
 position: fixed;
 background: rgba(0, 0, 0, 0.8);
 /* Semi-transparent background */
 display: flex;
 align-items: center;
 justify-content: center;
 color: white;
 font-family: Arial, sans-serif;
 opacity: 0;
 visibility: hidden;
 transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

/* .refreshTable {
 /* transform: translateY(-50%);
 top: 44%;
 left: 20.7rem;
 width: 50%;
 height: 72%;
 position: absolute;
 width: calc(100em - 61em);
 height: calc(100% - 29%);
} */

.refreshTable.listOnly {
 top: 40%;
 height: 60%;
}

.refreshTable {
 position: absolute;
 /* Posisi hanya dalam log-section */
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 3;
}

.maintainceScreen.show,
.refreshTable.show {
 opacity: 1;
 visibility: visible;
}

body.hide {
 opacity: 0;
}

body.dark-mode {
 background-color: #1e1e1e;
 color: #e0e0e0;
}

body {
 background-color: #f5f5f5;
 color: #333;
 transition: opacity 0.3s ease;
}

/** Notification */
#notification-container {
 position: fixed;
 top: 20px;
 right: 20px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 max-width: 90%;
 z-index: 11;
}

/* Notification styling */
.notification-v2 {
 padding: 15px 20px;
 border-radius: 8px;
 color: white;
 font-size: 16px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
 /* animation: slideIn 0.5s ease, fadeOut 0.5s ease 3s forwards; */
 animation: slideIn 0.5s ease;
 position: relative;
}

/* Success, Error, and Warning background colors */
.notification-v2.success {
 background-color: #4caf50;
}

.notification-v2.error {
 background-color: #f44336;
}

.notification-v2.warning {
 background-color: #ff9800;
}

/* Close Button */
.notification-v2 .close-btn {
 /* margin-left: 82px !important; */
 /* padding-left: 45px !important; */
 right: 10px;
 width: unset;
 margin: unset;
 padding: unset;
 position: absolute;
 background: transparent;
 border: none;
 color: white;
 font-size: 18px;
 cursor: pointer;
 font-weight: bold;
 /* padding: 5px; */
}

.notification-v2:has(.close-btn) span {
 margin-right: 14px;
}

/* Action Buttons */
.notification-v2 .action-btn {
 display: flex;
 gap: 10px;
}

.action-btn button {
 padding: 5px 15px;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 font-weight: bold;
}

.action-btn .ok-btn {
 background-color: #4caf50;
 color: white;
}

.action-btn .cancel-btn {
 background-color: #f44336;
 color: white;
}

@keyframes slideIn {
 from {
  transform: translateX(100%);
  opacity: 0;
 }

 to {
  transform: translateX(0);
  opacity: 1;
 }
}

/* Fade out animation */
@keyframes fadeOut {
 from {
  transform: translateX(0);
  opacity: 1;
 }

 to {
  transform: translateX(100%);
  opacity: 0;
 }
}

/*? All */
body.dark-mode .loading {
 background-color: rgba(30, 30, 30, 0.466);
}

.loading {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 /* Cover the entire viewport */
 top: 0;
 left: 0;
 width: 100vw;
 height: 100vh;
 background-color: rgba(255, 255, 255, 0.8);
 /* Optional background */
 z-index: 10;
 /* Ensures it's on top */
}

body.dark-mode .navbar {
 background-color: #333;
 /* Navbar gelap */
 color: #e0e0e0;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4);
}

.navbar.hideUp {
 transform: translateY(-100%);
}

/* Styling Navbar */
.navbar {
 position: relative;
 z-index: 5;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 20px;
 background-color: #333;
 color: #fff;
 box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
 transition: transform 0.3s ease;
}

.navbar h1 {
 font-size: 1.5em;
 margin: 0;
 font-weight: 600;
 color: #fff;
}

/* Styling untuk tombol navigasi */
.nav-buttons {
 display: flex;
 gap: 10px;
 /* Memberikan jarak antara tombol */
}

.nav-buttons button {
 width: unset;
 background-color: #4CAF50;
 color: white;
 border: none;
 padding: 10px 20px;
 font-size: 1em;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

body.dark-mode .nav-buttons button:hover {
 background-color: #3a9b3a;
 /* Lebih gelap saat hover */
}

.nav-buttons button:hover {
 background-color: #45a049;
}

body.dark-mode .nav-buttons button:active {
 background-color: #2e7d32;
}

.nav-buttons button:active {
 background-color: #388e3c;
}

body.dark-mode .user-info span {
 color: #e0e0e0;
}

/* Styling untuk info user dan tombol logout */
.user-info {
 display: flex;
 align-items: center;
 gap: 10px;
 white-space: nowrap;
 overflow-y: auto;
}

.user-info span {
 font-size: 1em;
 color: #fff;
}

.userInfoButton {
 color: #fff;
 padding: 8px 12px;
 border: none;
 border-radius: 5px;
 font-size: 0.9em;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

#logoutButton {
 background-color: #e74c3c;
}

#logoutButton:hover {
 background-color: #c0392b;
}

#logoutButton:active {
 background-color: #a93226;
}

#reloadList {
 background-color: #218838;
}

#reloadList:hover {
 background-color: #28a745;
}

#reloadList:active {
 background-color: #2e7d32;
}

body.dark-mode .menu-toggle {
 background-color: #444;
 color: #e0e0e0;
}

.menu-toggle {
 display: none;
 background-color: #333;
 color: white;
 border: none;
 font-size: 1.5em;
 padding: 10px 20px;
 cursor: pointer;
}

/* Flexbox for main container */

body.dark-mode .container {
 background-color: #2c2c2c;
 padding: 20px;
}

.container.hideDown {
 transform: translateY(100%);
}

.container.hide {
 opacity: 0;
}



.container {
 display: flex;
 flex-direction: column;
 gap: 20px;
 padding: 20px;
 transition: opacity 0.3s ease, transform 0.7s ease;
}

/* Button styles */
#todayButton {
 padding: 4px 10px;
 font-size: 12px;
 margin-left: 0px;
 border: 1px solid #007bff;
 background-color: #007bff;
 color: white;
 border-radius: 5px;
 cursor: pointer;
 transition: background-color 0.3s;
}

#todayButton:hover {
 background-color: #0056b3;
}

body.dark-mode .input-section,
body.dark-mode .log-section,
body.dark-mode .side-panel {
 background-color: #333;
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}

.log-section {
 position: relative;
}

.input-section,
.log-section,
.side-panel {
 background-color: #fff;
 border-radius: 8px;
 padding: 20px;
 box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode select {
 background-color: #444;
 color: #e0e0e0;
 border: 1px solid #555;
 padding: 8px;
 border-radius: 5px;
}

body.dark-mode input[type="text"]::placeholder,
body.dark-mode input[type="date"]::placeholder {
 color: #888;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="date"]:focus,
body.dark-mode select:focus {
 outline: none;
 border-color: #4CAF50;
 box-shadow: 0px 0px 5px rgba(76, 175, 80, 0.5);
}

body.dark-mode select.classList,
body.dark-mode select.attendance,
body.dark-mode select.studentList {
 background-color: #444;
 color: #e0e0e0;
 border: 1px solid #555;
 padding: 8px;
 border-radius: 5px;
}

body.dark-mode select.classList:focus,
body.dark-mode select.attendance:focus,
body.dark-mode select.studentList:focus {
 outline: none;
 border-color: #4CAF50;
 box-shadow: 0px 0px 5px rgba(76, 175, 80, 0.5);
}

body.dark-mode select.classList option,
body.dark-mode select.attendance option,
body.dark-mode select.studentList option {
 background-color: #333;
 color: #e0e0e0;
}

.date-sorting-controls {
 margin-bottom: 1rem;
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
}

.date-sorting-controls .date-inputs {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}

.date-sorting-controls .action-buttons {
 display: flex;
 gap: 0.5rem;
 margin-top: 0.5rem;
}

body.dark-mode .date-sorting-controls label {
 color: #e0e0e0;
}

.date-sorting-controls label {
 font-weight: bold;
}

body.dark-mode .date-sorting-controls input,
body.dark-mode .date-sorting-controls button {
 background-color: #444;
 color: #e0e0e0;
}

.date-sorting-controls input {
 padding: 0.5rem;
 font-size: 0.8rem;
}

.date-sorting-controls button {
 padding: 0.5rem 0.7rem;
 font-size: 0.8rem;
}

body.dark-mode .date-sorting-controls button.active-toDisabled:hover {
 background-color: #775151 !important;
}

body.dark-mode .date-sorting-controls button:hover {
 background-color: #666 !important;
}

#logTable {
 transition: color 0.001s cubic-bezier(0, 1.34, 0.89, 0.08) !important;
 position: relative;
 overflow: hidden;
}

.pagination-controls {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 10px;
}

body.dark-mode .pagination-controls button:hover {
 background-color: #717171;
}

body.dark-mode .pagination-controls button {
 background-color: #555;
 color: #e0e0e0;
 border: none;
}

.pagination-controls button {
 margin: 0 10px;
 padding: 5px 10px;
 background-color: #333;
 color: white;
 border: none;
 cursor: pointer;
 width: 16%;
 /* border: 1px solid black; */
}

body.dark-mode button:disabled {
 background-color: #333 !important;
 color: #777;
}

button:disabled {
 background-color: #ffffff;
 color: #777;
 /* background-color: #ccc !important; */
 /* Disabled state */
 cursor: not-allowed !important;
}

/* Highlighting rows in log table */
body.dark-mode #logTableBody .Libur td:nth-child(5),
body.dark-mode td.Libur {
 background-color: rgba(0, 0, 0, 0.68);
 color: #ffffff;
}

#logTableBody .Libur td:nth-child(5),
td.Libur {
 background-color: rgb(0 0 0 / 68%);
 color: white;
}

body.dark-mode #logTableBody .Alpha td:nth-child(5),
body.dark-mode td.Alpha {
 background-color: rgba(207, 20, 20, 0.68);
 color: #e0e0e0;
}

#logTableBody .Alpha td:nth-child(5),
td.Alpha {
 background-color: rgba(207, 20, 20, 0.68);
 color: black;
}

body.dark-mode #logTableBody .Hadir td:nth-child(5),
body.dark-mode td.Hadir {
 background-color: rgba(93, 129, 84, 0.82);
 color: #ffffff;
}

#logTableBody .Hadir td:nth-child(5),
td.Hadir {
 background-color: rgb(93 129 84 / 82%);
 color: #ffffff;
}

body.dark-mode #logTableBody .Ijin td:nth-child(5),
body.dark-mode td.Ijin {
 background-color: rgba(145, 145, 145, 0.82);
 color: #000;
}

#logTableBody .Ijin td:nth-child(5),
td.Ijin {
 background-color: rgb(145 145 145 / 82%);
 color: #000000;
}

body.dark-mode #logTableBody .AFKkelas td:nth-child(5),
body.dark-mode td.AFKkelas {
 background-color: rgb(0 0 0 / 82%);
 color: #ebebeb;
}

#logTableBody .AFKkelas td:nth-child(5),
td.AFKkelas {
 background-color: rgb(0 0 0 / 82%);
 color: #ebebeb;
}

body.dark-mode #logTableBody .editing {
 background-color: rgba(223, 210, 33, 0.3);
 color: ghostwhite;
}

#logTableBody .editing {
 background-color: rgba(223, 210, 33, 0.3);
 color: black;
}

#logTableBody .success {
 background-color: rgba(49, 223, 33, 0.3);
 color: black;
}

#logTableBody .same {
 background-color: rgba(108, 110, 108, 0.3);
}

#logTableBody tr td.today {
 background-color: rgba(101, 153, 101, 0.3);
}

#logTableBody tr.deleted {
 background: rgb(235 0 0 / 37%);
}

body.dark-mode .attendance-summary {
 background-color: #292929d6;
}

.attendance-summary {
 margin-top: 20px;
 padding: 15px;
 background-color: #f4f4f4;
 border-radius: 8px;
 text-align: center;
 display: flex;
 flex-direction: column;
 gap: 10px;
 transition: all 0.2s ease-in-out;
}

.attendance-summary h3 {
 margin: 0 0 10px;
}

.summary-item {
 font-size: 16px;
 font-weight: bold;
}

#attendanceSummary {
 margin-top: 20px;
 text-align: center;
}

body.dark-mode #toggleButton {
 background-color: #1f4875;
}

#toggleButton {
 padding: 8px 16px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

#toggleButton:hover {
 background-color: #0056b3 !important;
}

body.dark-mode .active-toDisabled {
 background-color: rgb(143 39 39 / 70%) !important;
}

.active-toDisabled {
 background-color: rgb(213 28 28 / 70%);
}

.active-toDisabled:hover {
 background-color: rgb(213 28 28 / 100%);
}

button {
 transition: background-color 0.3s !important;
}

.class-sorting-controls {
 margin-bottom: 20px;
 /* Space below the sorting controls */
}

body.dark-mode .class-sorting-controls button {
 background-color: #28a745;
 color: #fff;
}

/* Style for the sort button */
.class-sorting-controls button {
 background-color: #28a745;
 /* Green background color */
 color: white;
 /* White text color */
 border: none;
 /* No border */
 padding: 10px 20px;
 /* Padding for better touch targets */
 border-radius: 5px;
 /* Rounded corners */
 font-size: 16px;
 /* Font size */
 cursor: pointer;
 /* Pointer cursor on hover */
 transition: background-color 0.3s ease, transform 0.2s ease;
 /* Smooth transition effects */
}

/* Hover effect for the button */
.class-sorting-controls button:hover {
 background-color: #218838;
 /* Darker green on hover */
 transform: translateY(-2px);
 /* Slight lift effect on hover */
}

/* Active state for the button */
.class-sorting-controls button:active {
 transform: translateY(1px);
 /* Slight push down effect when clicked */
}

/* Disabled Input Fields */
input:disabled,
select:disabled {
 background-color: #e9ecef;
 border: 1px solid #adb5bd;
 color: #6c757d;
 cursor: not-allowed;
}

body.dark-mode input:disabled,
body.dark-mode select:disabled {
 background-color: #211f1f;
 border: 1px solid #adb5bd;
 color: #6c757d;
}

body.dark-mode .warn {
 color: #af414f;
}

.warn {
 color: red;
 margin-top: 20px;
}

.errorMessage {
 font-weight: bold;
 color: red;
 font-size: 12px;
 margin-top: 10px;
 text-align: center;
}

.cancelForm {
 background-color: rgb(155 46 46 / 90%);

 transition: opacity 0.3s ease !important;
 opacity: 0;
}

.cancelForm:hover {
 background-color: rgba(155, 46, 46, 1);
}

.hidden {
 display: none;
}

h2,
h3 {
 margin-bottom: 10px;
}

form label {
 display: block;
 margin-top: 10px;
}

/* Responsive Input, Select, and Button Styles */
body.dark-mode button {
 background-color: #3f3e3ef7;
}

input,
select,
button {
 width: 100%;
 padding: 8px;
 margin-top: 5px;
 border-radius: 4px;
 border: 1px solid #ccc;
 transition: all 0.5s ease;
}

.attendance label {
 display: inline-block;
 margin-right: 10px;
}

table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 10px;
}

table th,
table td {
 padding: 10px;
 border: 1px solid #ddd;
 text-align: center;
}

.side-panel ul {
 list-style: none;
 padding: 0;
}

.side-panel ul li {
 margin: 5px 0;
}

#dailyPicketList .info {
 top: 6px;
 /* bottom: 67px; */
 /* top: 10px; */
 /* padding-bottom: 10px; */
 /* margin-top: 25px; */
 font-size: 10px;
 position: relative;
}

#dailyPicketList .refId {
 margin-top: 10px;
 /* top: 3px; */
 /* bottom: 67px; */
 /* top: 10px; */
 /* margin-bottom: 10px; */
 /* margin-top: 25px; */
 font-size: 10px;
 position: relative;
}

button {
 cursor: pointer;
 background-color: #333;
 color: #fff;
 border: none;
}

button:hover {
 background-color: #555;
}

/* Style for the advanced system section */
.advanced-system {
 margin-top: 20px;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
 /* background-color: #f9f9f9; */
}

.advanced-system h3 {
 margin-bottom: 15px;
}

.advanced-system label {
 display: block;
 margin-bottom: 10px;
}

.advanced-system select,
.advanced-system input[type="date"],
.advanced-system input[type="checkbox"] {
 display: block;
 margin-top: 5px;
 padding: 5px;
 width: 100%;
 max-width: 300px;
 box-sizing: border-box;
}

.advanced-system button {
 margin-top: 15px;
 padding: 10px 20px;
 background-color: #007bff;
 color: white;
 border: none;
 border-radius: 5px;
 cursor: pointer;
}

.advanced-system button:hover {
 background-color: #0056b3;
}

.hidden {
 display: none;
}

/* Style for the group switching section */
.group-switching-section {
 margin-top: 20px;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
 /* background-color: #f9f9f9; */
}

.group-switching-section h2 {
 margin-bottom: 15px;
}

.group-switching-section label {
 display: block;
 margin-bottom: 10px;
}

.group-content {
 margin-top: 20px;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
 /* background-color: #f9f9f9; */
}

.group-switching-section input[type="checkbox"] {
 width: 20px;
 height: 20px;
}

.group-content input[type="checkbox"] {
 width: unset;
}

.advancedSystem {
 margin-top: 20px;
}

main {
 margin-bottom: 20px;
}

/* Footer */
footer {
 margin: 0;
 position: fixed;
 left: 0;
 bottom: 0px;
 width: 100%;
 background-color: #333;
 color: white;
 text-align: center;
 font-size: 10px;
 /* font-size: 1em; */
 border-top: 1px solid white;
 z-index: 3;
 margin-top: 10px;
}

footer span.bg-pink {
 background-color: rgba(177, 109, 120, 0.674);
}

footer p {
 font-size: 1.2em;
 line-height: 1.6;
 padding: 10px;
}

/* Responsive Styles using Media Queries */
@media (min-width: 1030px) {
 .container {
  flex-direction: row;
  /* Align items in a row for larger screens */
 }

 .input-section,
 .log-section,
 .side-panel {
  flex: 1;
  /* Each section will take equal space */
  margin: -5px;
  /* Add margin for spacing */
 }
}

@media (max-width: 767px) {
 .notification-v2 {
  font-size: 14px;
  padding: 12px 16px;
 }

 /* Navbar menjadi kolom pada layar kecil */
 .navbar {
  flex-direction: column;
  align-items: flex-start;
 }

 /* Menyembunyikan menu navigasi dan tombol logout di layar kecil */
 .nav-buttons {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 10px;
 }

 /* Menampilkan tombol untuk toggle menu di layar kecil */
 .menu-toggle {
  display: block;
  margin-top: 10px;
 }

 /* Menampilkan menu navigasi saat menu toggle di klik */
 .nav-buttons.active {
  display: flex;
 }

 .input-section,
 .log-section,
 .side-panel {
  padding: 10px;
  /* Reduce padding on smaller screens */
 }

 table th,
 table td {
  font-size: 13px;
  padding: 5px;
 }

 .date-sorting-controls {
  display: grid;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

 .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

 .pagination-controls button {
  width: 22%;
 }

 footer p {
  font-size: 1.2em;
 }

 main {
  margin-bottom: 50px;
 }
}

@media (min-width: 768px) and (max-width: 1024px) {
 .nav-buttons {
  gap: 15px;
 }
}

@media (max-width: 480px) {
 #notification-container {
  top: 10px;
  right: 10px;
  max-width: 100%;
 }
}

@media screen and (max-width: 400px) {
 .user-info {
  width: 100%;
  justify-content: space-between;
 }

 .user-info span {
  display: block;
  max-width: 270px;
  overflow-y: auto;
  white-space: nowrap;
  width: 100%;
  /* text-overflow: ellipsis; */
  /* overflow-x: hidden; */
 }

 /* Mengatur ukuran dan posisi button logout agar tidak over width */
 #logoutButton {
  font-size: 12px;
  padding: 4px 8px;
  max-width: 80px;
  /* Pastikan tombol tidak melebar */
 }

 footer p {
  font-size: 1em;
 }

 main {
  margin-bottom: 50px;
 }
}