/* ===========================
   GLOBAL DARK THEME
=========================== */
body {
  /* font-family: system-ui, sans-serif;*/
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  /*background: #0d1117;*/
  /* deep dark */
  color: #e5e7eb;
  /*padding: 24px;*/
  margin: 0;
  box-sizing: border-box;
}

/* ===========================
   LABELS
=========================== */
label {
  display: block;
  margin-top: 7px;
  margin-bottom: 0px;
  font-size: 14px;
  font-weight: 600;
  color: #116aaa;
}

/* ===========================
   INPUTS
=========================== */
select {
  max-width: 300px;
  min-width: 250px;
  padding: 5px 12px;
  margin: 7px auto 10px auto;
  border-radius: 5px;
  border: none;
  outline: none;
  border-bottom: 1px solid rgb(8, 71, 110);
  background: rgb(10, 121, 194);
  color: whitesmoke;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.15s ease;
}

input[type="text"],
input[type="number"] {
  max-width: 200px;
  padding: 5px 7px;
  margin: 2px auto;
  border-radius: 5px;
  border: none;
  outline: none;
  border-bottom: 1px solid rgb(14, 113, 178);
  background: rgba(13, 110, 174, 0.146);
  color: #062444;
  font-size: 15px;
  font-weight: 300;
  text-align: right;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

select:focus {
  outline: none;
  border: none;
  border-bottom: 1px solid rgb(14, 113, 178);
}

input:focus {
  outline: none;
  border: none;
  border-bottom: 1px solid #08964f;
  background: rgba(14, 199, 125, 0.132);
}

input::placeholder {
  font-size: 13px;
  color: #5b5b5b;
  /* blue */
}

/* ===========================
   INLINE NUMBER + AMOUNT
=========================== */
.inline-row {
  display: flex;
  gap: 12px;
}

.inline-row .field {
  flex: 1;
}

/* ===========================
   OPTIONS ROW
=========================== */
.options-row {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #063951;
  background: #e2eff6;
  border-radius: 5px;
  margin: 10px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(14, 111, 171, 0.683);
  outline: none;
  text-align: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.options-row label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  color: #0b4a77;
  margin: 5px;
  box-sizing: border-box;
}

/* ===========================
   BUTTONS
=========================== */
.add_entry_btn {
  display: block;
  max-width: 300px;
  min-width: 250px;
  text-align: center;
  margin: 20px auto 5px auto;
  padding: 5px 16px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: whitesmoke;
  background: #1074c6;
  border-left: 3px solid var(--accent-green);
  border-bottom: 1px solid rgb(10, 81, 122);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

.add_entry_btn i {
  margin-right: 5px;
  color: whitesmoke;
}

.btn:hover {
  opacity: 0.9;
}

.btn-danger {
  background: #dc2626 !important;
}

.btn-secondary {
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  max-width: 250px;
  min-width: 150px;
  font-size: 14px !important;
  text-decoration: none;
  color: rgb(11, 72, 103);
  border-radius: 5px;
  background: #acd0e7;
  padding: 5px 15px;
  margin: 0;
  border-left: 2px solid var(--accent-blue);
  box-sizing: border-box;
}

.btn-secondary i {
  color: black;
  margin-left: 10px;
  font-weight: 600;
}

.btn_preview {
  margin: 15px auto !important;
  text-align: center;
}

.clear {
  color: black !important;
  background: rgba(160, 10, 10, 0.655) !important;
  padding: 2px 3px !important;
  border-bottom: 1px solid rgb(10, 81, 122) !important;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.2s ease-in-out;
}

.clear:hover {
  background: rgb(207, 58, 58) !important;
}

.btn-sm {
  margin: 2px 0px 2px 7px;
  font-size: 12px;
}

/* ===========================
   MESSAGE BOX
=========================== */
.message {
  width: auto;
  background: #e2eff6;
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 600;
  color: #0a5a9b;
  text-align: center;
  border-radius: 12px;
  border: 1px dotted var(--accent-blue);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

/* ===========================
   PREVIEW BOX
=========================== */
.preview-box {
  color: #093a5d;
  text-align: center;
  margin-top: 0;
  padding: 14px;
  background: #e2eff6;
  border-radius: 12px;
  box-sizing: border-box;
  border: 1px solid rgba(13, 109, 154, 0.237);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

.preview-box .pending_area {
  max-height: 375px;
  overflow-y: auto;
}

.preview-box .pending_area td {
  text-align: right !important;
  padding-right: 7px;
  box-sizing: border-box;
}

.preview-box h4 {
  margin-top: 3px;
  font-size: 16px;
}

.preview-box table {
  width: 100% !important;
}

.right-arrow {
  color: rgb(14, 161, 50);
  font-weight: 600;
}

.preview_box_trows_tamount {
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-weight: 400;
  margin-top: 10px;
  padding: 10px;
  color: #0c5884;
  background: #edf5fada;
  border: none;
  outline: none;
  border-radius: 6px;
  border-bottom: 1px solid rgba(13, 122, 173, 0.456);
  box-shadow: 0 2px 2px rgba(3, 3, 3, 0.3);
}

.pbox-sec {
  width: 100% !important;
}

.preview-box th {
  font-size: 15px;
  font-weight: 600;
  color: #0e7caf;
}

.preview-box td {
  padding: 0;
  margin: 0;
}

.pending_entry td {
  height: 10px;
}

.right {
  min-height: 500px;
  padding-bottom: 15px;
  overflow: auto;
}

.card h2,
h3,
h1 {
  font-size: 20px;
  color: #0b5076;
  margin-left: 30px;
}

.card h2 {
  margin-top: 10px;
  font-size: 18px;
}

.card p {
  color: #051e32;
}

.form-row label,
select {
  color: #0b5578 !important;
  font-size: 14px;
}

.table_admin th {
  color: #073b62;
  font-size: 14px !important;
}


.m-content1 {
  box-sizing: border-box;
  width: 450px;
  margin: 10px auto;
  text-align: center;
  background: var(--glass);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid rgb(34, 139, 195);
  outline: none;
  border-top: 7px solid rgb(34, 139, 195);
  box-shadow: 1px 5px 5px rgba(2, 30, 41, 0.5);
}

.m-content .message {
  box-sizing: border-box;
  width: 450px;
  margin: 10px auto;
}

.reset-form {
  box-sizing: border-box;
  width: 450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  margin: 10px auto;
  background: rgba(244, 244, 244, 0.924);
  border: 1px solid rgba(12, 113, 181, 0.683);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.reset-form ::placeholder {
  font-weight: 400;
  color: #0a5d84;
  opacity: 0.9;
}

.reset-form input {
  width: 350px;
  padding: 7px 10px;
  margin: 10px 0;
  border-radius: 5px;
  border: none;
  outline: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  background: rgba(13, 110, 174, 0.146);
  color: #08598f;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

.reset-form button {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  outline: none;
  color: whitesmoke;
  background: #0a79c2;
  border-bottom: 1px solid rgb(10, 81, 122);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease-in-out;
}

.reset-form button:hover {
  background: #31a0f5;
}

.m-content h1 {
  color: #0a5e85;
  margin: 7px auto;
}

.m-content a {
  color: #0c5884;
  font-weight: 600;
  margin: 5px auto 15px auto;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.m-content a:hover {
  text-decoration: underline;
}


/* ===========================
   TABLES
=========================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

td,
th {
  padding: 8px;
  font-size: 14px;
  border-bottom: 1px solid rgba(55, 65, 81, 0.4);
}

th {
  color: #cbd5e1;
  font-weight: 600;
}

.crud-table {
  text-align: center;
}

.crud-table th {
  background: #f0f0f0;
  color: #0a5e85;
  font-size: 14px;
}

/* ===========================
   REMOVE BUTTON
=========================== */
.remove-btn {
  font-size: 10px;
  color: whitesmoke;
  background: rgba(6, 135, 194, 0.856);
  font-weight: 600;
  padding: 5px 10px;
  margin: 2px auto;
  border: none;
  outline: none;
  border-bottom: 1px solid rgb(8, 79, 102);
  text-decoration: none;
  box-shadow: 0 2px 2px rgba(3, 3, 3, 0.2);
  transition: all 0.2s ease;
}

.remove-btn i {
  color: whitesmoke;
  transition: all 0.2s ease;
}

.remove-btn:hover i {
  color: #af0d0d;
}

.btn-delete {
  border: none;
  outline: none;
  border-bottom: 2px solid rgb(1, 10, 17);
  border-radius: 5px;
  padding: 3px 20px;
  background: #0d86c8;
  box-shadow: 0 2px 2px rgba(3, 3, 3, 0.2);
  transition: all 0.2s ease;
}

.btn-delete:hover {
  background: red;
}

/* ===========================
   REMAINING COLORS
=========================== */
.remain-green {
  color: #4ade80;
  font-weight: 600;
}

.remain-orange {
  color: #fbbf24;
  font-weight: 600;
}

.remain-red {
  color: #f87171;
  font-weight: 600;
}

/* ===========================
   INLINE REPRINT BUTTONS
=========================== */
.reprint-row {
  max-width: 560px;
  margin: 16px auto 0 auto;
  display: flex;
  gap: 12px;
}

.reprint-row form,
.reprint-row a {
  flex: 1;
}

/* ===========================
   INLINE ROWS
=========================== */
.row-inline {
  display: flex;
  gap: 0;
  max-width: 50%;
  border: none;
  outline: none;
  text-align: center;
}

.row-inline .col {
  flex: 1;
}

.row-inline-entry {
  display: flex;
  gap: 15px;
  margin: 5px auto;
  justify-content: center;
  align-items: center;
  text-align: center;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.row-inline-secondary {
  display: flex;
  justify-content: center;
  gap: 30px;
  max-width: 100%;
  border: none;
  outline: none;
  margin: 25px auto 5px auto;
  text-align: center;
}

.select_form {
  color: whitesmoke;
  width: 100%;
  border: none;
  outline: none;
  margin: 0 auto 5px auto;
  border-bottom: 1px solid #0f7caf;
  text-align: center;
  background: rgba(201, 226, 235, 0.2);
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
}

.select_form select {
  color: whitesmoke !important;
}

.card_sec {
  background: rgba(226, 240, 248, 0.476);
  backdrop-filter: blur(20px);
  border-radius: 10px;
  padding: 0;
  margin: 20px auto 2px auto;
  border: none;
  /*border-top: 1px solid rgba(16, 119, 159, 0.126);
  border-bottom: 1px solid rgb(34, 139, 195);
  outline: none;
  box-shadow: 1px 3px 3px rgba(2, 30, 41, 0.3);*/
}

.card_sec h3 {
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 14px;
  color: #79828c;
}

.card_sec p {
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #79868c;
}

@media (max-width: 768px) {
  .row-inline {
    width: 100%;
    gap: 10px;
  }

  input[type="text"],
  input[type="number"] {
    width: 100%;
    display: flex;
    flex-direction: column;
    max-width: 200px;
    padding: 5px 12px;
    margin: 5px auto;
    border-radius: 5px;
    border: none;
    outline: none;
    border-bottom: 1px solid rgb(14, 113, 178);
    background: rgba(13, 110, 174, 0.146);
    color: #062444;
    font-size: 15px;
    font-weight: 600;
    text-align: right;
    transition: all 0.15s ease;
  }
}

/****** NEW CSS   */
.mb-3 {
  margin: 3px 15px;
}

.mb-3 .col-md-3 {
  border: none;
  outline: none;
  border-radius: 5px;
  padding: 5px 10px;
}

.mb-3 input {
  width: 150px;
  padding: 5px 10px;
  background: #cae0ee;
  border-radius: 5px;
  border: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  outline: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.mb-3 select {
  color: whitesmoke !important;
}

.card h4,
h5,
p,
strong {
  color: #0a5e85;
}

.summary div {
  color: #0c5884 !important;
}

.table-sm th,
td,
.box,
em {
  color: #0a5681;
  text-align: center;
  padding: 2px 3px;
}

.table-sm {
  padding-bottom: 20px !important;
}

.col-md-3 select {
  color: whitesmoke !important;
}

.table-striped th,
td {
  color: #095173;
}

.row-inline .col {
  margin: 3px 10px;
}

.col select {
  color: whitesmoke !important;
}

.pale_combo {
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa9d;
  border-radius: 4px;
  border: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.welcome_user strong {
  color: whitesmoke !important;
}

/* Glass header for collapsible sections */
.glass-header {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  padding: 12px 16px;
  margin-bottom: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s ease;
}

.glass-header:hover {
  background: rgba(255, 255, 255, 0.18);
}

.accordion-body {
  display: none;
  padding: 12px 16px;
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 20px;
}

.arrow {
  font-size: 18px;
  width: 20px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #0a79c2;
  font-weight: 600;
}

.page-item {
  list-style: none !important;
}

.page-item .active {
  background: #7f0839;
}

.pagination a {
  font-family: Roboto, Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 14px;
  font-weight: 400;
  padding: 4px 7px;
  background: #0a79c2;
  color: white;
  border-radius: 5px;
  border-bottom: 1px solid rgb(3, 34, 44);
  text-decoration: none;
}

.pagination a.active {
  background: #7f0839;
}

.pagination span {
  opacity: 0.7;
}

.page-btn {
  min-width: 15px;
  display: inline-block;
  font-size: 14px;
  color: #f5f5f5;
  text-align: center;
  padding: 3px 5px;
  margin: 10px 3px;
  background: #0b77b5;
  border-radius: 5px;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid rgb(8, 58, 72);
  transition: all 0.2s ease-in-out;
}

.page-btn:hover {
  background: #0a8208;
}

.page-btn-active {
  font-size: 14px;
  color: #f5f5f5;
  text-align: center;
  padding: 3px 5px;
  margin: 10px 3px;
  border-radius: 5px;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid rgb(8, 58, 72);
  background: #720725;
}

.glass-header {
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa9d;
  border-radius: 4px;
  border: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.glass-header .arrow,
.user-title {
  color: #0b4f86;
  font-weight: 600;
}

.category-blocks {
  color: #054968;
  font-weight: 600;
}

.salary-table th {
  background: #f0f0f0;
  color: #0a5e85;
  font-size: 14px;
}

.collapsible-card {
  border: 1px solid #2f97b1;
  border-radius: 6px;
  margin-bottom: 12px;
  background: #fff;
}

.collapsible-header {
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  border-bottom: 1px solid #eee;
  border-radius: 6px;
}

.collapsible-title {
  font-weight: 600;
}

.collapsible-arrow {
  transition: transform 0.25s ease;
}

.collapsible-body {
  display: none;
  padding: 14px;
  background: #fff;
}

.mail {
  color: #0dc456 !important;
  font-weight: 300;
  text-decoration: none;
  cursor: pointer;
}

.filter-bar select {
  color: whitesmoke !important;
}

.col .date_time {
  padding: 3px 10px;
  margin-bottom: 7px;
  background: #cceee9b3;
  border-radius: 5px;
  border: none;
  border-bottom: 1px solid rgba(6, 141, 96, 0.773);
  outline: none;
  /*box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);*/
}

.ticket-search-form {
  text-align: center;
}

.ticket-search-form input {
  font-family: Roboto, Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 11px;
  font-weight: 600;
  width: 120px;
  padding: 5px 10px;
  background: #cae0ee;
  border-radius: 5px;
  border: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  outline: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.ticket-search-form input:focus {
  background: rgba(12, 181, 111, 0.2);
}

.ticket-search-form input::placeholder {
  color: #0a5e85;
  opacity: 0.7;
}

.ticket-search-form button {
  font-family: Roboto, Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: #0875ce;
  color: rgb(247, 247, 247);
  border: none;
  outline: none;
  border-radius: 5px;
  border-bottom: 1px solid rgb(3, 34, 44);
  text-decoration: none;
  box-shadow: 0 2px 3px rgba(4, 26, 64, 0.2);
}

.ticket-search-form button:hover {
  background: #31a0f5;
}

.error-box {
  text-align: center;
  font-style: italic;
  color: #dc2626;
}

.salary-filter-form {
  margin: 10px 20px;
}

.salary-filter-form label {
  color: #0b5578 !important;
  font-size: 14px;
}

.salary-filter-form select {
  color: whitesmoke !important;
}

.salary-filter-form input {
  width: 150px;
  padding: 5px 10px;
  background: #cae0ee;
  border-radius: 5px;
  border: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  outline: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.form-row {
  margin: 10px 0px;
}

.form-row label {
  color: #0b5578 !important;
  font-size: 14px;
}

.form-row select {
  margin: 5px auto !important;
  color: whitesmoke !important;
}

.form-row input {
  width: 150px;
  padding: 5px 10px;
  background: #cae0ee !important;
  border-radius: 5px;
  border: none;
  border-bottom: 1px solid rgb(12, 113, 181);
  outline: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

/******** Modal for balance transactions */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-box {
  background: #1e293b;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 10px;
  width: 380px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

.modal-box textarea {
  width: 100%;
  height: 100px;
  background: #0f172a;
  color: #e2e8f0;
  border: 1px solid #334155;
}

.modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.btn-note {
  font-family: Roboto, Calibri, "Trebuchet MS", sans-serif;
  font-size: 12px;
  font-weight: 400;
  box-sizing: border-box;
  width: 75px;
  padding: 3px 10px;
  border-radius: 5px;
  border: none;
  outline: none;
  color: whitesmoke;
  background: #0a79c2;
  border-bottom: 1px solid rgb(10, 81, 122);
  transition: all 0.2s ease-in-out;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}

.btn-note:hover {
  background: #5ea3df;
}