#donatePopipDiv {
  min-height: 200px;
  width: 100%;
}

.topControl {
  padding: 10px;
  width: 100%;
}

#timeClockModalContent {
  padding: 10px;
}

#shift_div {
  display: none;
}

#location {
  height: 50px;
}

.aioCustomField > input,
.aioCustomField > select {
  min-height: 50px;
  width: 100%;
}

#map_wrapper {
  width: 100%;
  min-height: 400px;
  text-align: center;
}

#map_cont {
  position: relative;
  width: 100%;
  min-height: 500px;
}

#report-google-map,
#animate-google-map {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#clockMessage,
#jsTimer {
  text-align: center;
}

#employeeReportTable {
  overflow-x: auto;
}

.epProfileField {
  width: 100%;
  min-height: 60px;
}

#breakButton {
  cursor: pointer;
}

#managerReportButton a,
#employeeReportButton a {
  font-family: "Roboto", sans-serif;
}

.aiotooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.aiotooltip .aiotooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.aiotooltip:hover .aiotooltiptext {
  visibility: visible;
}

#employeeProfile input[type="text"] {
  width: 100%;  
  margin: 8px 0;
  box-sizing: border-box;
}

.aio_row {
  width: 100%;
  padding: 10px;
}

.aio_row > label {
  font-weight: 800;
  float: left;
  padding-right: 30px;
}

.aio_row > input, .aio_row > select{
  min-width: 300px;
  min-height: 30px;
  padding: 5px;
}

.managerProfileInput {
  padding: 10px 0 10px 0;
  width: 100%;
}

#employeeProfile input[type="button"],
input[type="submit"],
input[type="reset"] {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

.aio-hide {
  display: none !important;
}

.aio-vl {
  border-left: 2px solid #4caf50;
  height: 60px;
  padding-left: 5px;
}

#aio_time_clock a,
#aio_time_clock_pin_pad a,
#aio_time_clock_quick_pick a {
  text-decoration: none;
}

#aio_time_clock .button {
  text-decoration: none;
}

#aio_time_clock input.invalid,
#aio_time_clock_pin_pad input.invalid,
#aio_time_clock_quick_pick input.invalid {
  background-color: #ec4949;
}

#aio_time_clock select.invalid {
  background-color: #ec4949;
}

.aio_generic_button {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

.aio_generic_button_small {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white !important;
  padding: 10px 22px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
}

.aio_generic_button_xsmall {
  background-color: #4caf50;
  /* Green */
  border: none;
  color: white !important;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
  max-width: 80px;
}

/* spinner */

.aio-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 60px;
  width: 60px;
  margin: 0px auto;
  -webkit-animation: rotation 0.6s infinite linear;
  -moz-animation: rotation 0.6s infinite linear;
  -o-animation: rotation 0.6s infinite linear;
  animation: rotation 0.6s infinite linear;
  border-left: 6px solid rgba(0, 174, 239, 0.15);
  border-right: 6px solid rgba(0, 174, 239, 0.15);
  border-bottom: 6px solid rgba(0, 174, 239, 0.15);
  border-top: 6px solid rgba(0, 174, 239, 0.8);
  border-radius: 100%;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(359deg);
  }
}

@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }

  to {
    -o-transform: rotate(359deg);
  }
}

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

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

/* (A) FULL SCREEN WRAPPER */
#aio-spinner-full {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 0.2s;
}

/* (B) CENTER LOADING SPINNER */
#aio-spinner-full img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

/* (C) SHOW & HIDE */
#aio-spinner-full {
  visibility: hidden;
  opacity: 0;
}

#aio-spinner-full.show {
  visibility: visible;
  opacity: 1;
}

#pinPadCustom {
  width: 350px;
}

.pin-pad-wrapper .row {
  text-align: center;
}

.aio-pinpad {
  max-width: 350px !important;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.aio-pinpad .pin-pad-wrapper {
  display: block;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  background-color: #263238;
  border-radius: 5px;
  padding: 25px;
}

.aio-pinpad .pin-pad-wrapper:before,
.aio-pinpad .pin-pad-wrapper:after {
  content: "";
  z-index: -1;
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.aio-pinpad .pin-pad-wrapper:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  -moz-transform: skew(8deg) rotate(3deg);
  -ms-transform: skew(8deg) rotate(3deg);
  -o-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

.aio-pinpad .pin-pad-wrapper .pin {
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #90a4ae;
}

.aio-pinpad .pin-pad-wrapper .pin i {
  margin-left: 5px;
  margin-right: 5px;
}

.aio-pinpad .pin-pad-wrapper span {
  display: block;
  padding: 5px;
}

.aio-pinpad .pin-pad-wrapper button {
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  width: 70px;
  height: 70px;
  text-align: center;
  font-size: 30px;
  border-radius: 5px;
  color: #90a4ae;
  background-color: #37474f;
  -webkit-box-shadow: 0 5px 8px -6px #000;
  -moz-box-shadow: 0 5px 8px -6px #000;
  box-shadow: 0 5px 8px -6px #000;
}

.aio-pinpad .pin-pad-wrapper button span {
  display: block;
  text-align: center;
  font-size: 30px;
}

.aio-pinpad .pin-pad-wrapper button:hover {
  color: #8a9faa;
  background-color: #334249;
  text-decoration: none;
}

.aio-pinpad .pin-pad-wrapper button:active,
.aio-pinpad .pin-pad-wrapper button:focus {
  color: #8198a3;
  background-color: #2d3940;
  -webkit-box-shadow: 0 2px 8px -6px #000;
  -moz-box-shadow: 0 2px 8px -6px #000;
  box-shadow: 0 2px 8px -6px #000;
  text-decoration: none;
}

#shift_div #shift_button {
  margin-top: 20px;
}

.full-width-button,
#shift_button {
  width: 95% !important;
}

#aio-tc-qrcode {
  text-align: center;
  display: flex;
  flex-direction: column;
}

table.dataTable thead th,
table.dataTable thead td {
  border-bottom: none !important;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
  border-top: none !important;
}

.pinPadForm {
  width: 390px;
  margin: 50px auto;
  background: #fff;
  padding: 35px 25px;
  text-align: center;
  box-shadow: 0px 5px 5px -0px rgba(0, 0, 0, 0.3);
  border-radius: 5px;
}

.pinPadButtons {
  display: block;
}

#passwordCustom,
#pin_number {
  padding: 0 40px;
  border-radius: 5px;
  width: 100%;
  margin: auto;
  border: 1px solid rgb(228, 220, 220);
  outline: none;
  font-size: 60px;
  color: transparent;
  text-shadow: 0 0 0 rgb(71, 71, 71);
  text-align: center;
}

.top-pad {
  margin-top: 10px;
}

#shift_notes {
  width: 100%;
  height: 50px;
}

#predefined_shifts {
  height: 50px;
}

#shift_div {
  padding-bottom: 10px;
}

#shift_button {
  margin-top: 10px;
}

.aio-action-btn {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

.aio-action-btn:hover {
  opacity: 0.5;
}

.aio-green {
  color: #fff !important;
  background-color: #4caf50 !important;
}

.aio-red {
  color: #fff !important;
  background-color: #f44336 !important;
}

.dataTables_length,
.dataTables_filter {
  padding: 10px;
}

#aio-tc-employee-list, #aio-manager-profile, #aio-monitoring-page, #reportResults {
  max-width: 90%;
  padding: 20px;
}

#aio_time_clock_pin_pad {
  width: 350px;
}

#passwordCustom,
#pin_number {
  outline: none;
}

.pinButton {
  border: none;
  background: none;
  font-size: 1.5em;
  border-radius: 50%;
  height: 60px;
  font-weight: 550;
  width: 60px;
  color: transparent;
  text-shadow: 0 0 0 rgb(102, 101, 101);
  margin: 7px 20px;
}

.clearCustom,
.enterCustom {
  font-size: 1em !important;
}

.pinButton:hover {
  box-shadow: #506ce8 0 0 1px 1px;
}

.pinButton:active {
  background: #506ce8;
  color: #fff;
}

.clearCustom:hover {
  box-shadow: #ff3c41 0 0 1px 1px;
}

.clearCustom:active {
  background: #ff3c41;
  color: #fff;
}

.enterCustom:hover {
  box-shadow: #47cf73 0 0 1px 1px;
}

.enterCustom:active {
  background: #47cf73;
  color: #fff;
}

/* -------------------------------------------------------
   Employee Profile Styles
   ------------------------------------------------------- */

.aio-employee-profile {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Profile Header Card */
.aio-profile-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 30px;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.aio-profile-avatar {
  flex-shrink: 0;
}

.aio-profile-avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.aio-profile-info {
  flex: 1;
  min-width: 200px;
}

.aio-profile-name {
  color: #fff;
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.aio-profile-department,
.aio-profile-email {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.aio-profile-department i,
.aio-profile-email i {
  width: 20px;
  margin-right: 8px;
  opacity: 0.8;
}

.aio-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Button Styles */
.aio-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.aio-btn i {
  font-size: 1rem;
}

.aio-btn-primary {
  background: #4f46e5;
  color: #fff;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

.aio-btn-primary:hover {
  background: #4338ca;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.5);
  color: #fff;
  text-decoration: none;
}

.aio-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(10px);
}

.aio-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  color: #fff;
  text-decoration: none;
}

.aio-btn-success {
  background: #10b981;
  color: #fff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.aio-btn-success:hover {
  background: #059669;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
  color: #fff;
  text-decoration: none;
}

/* Filter Card */
.aio-filter-card,
.aio-results-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  overflow: hidden;
}

.aio-filter-header,
.aio-results-header {
  background: #f8fafc;
  padding: 16px 24px;
  border-bottom: 1px solid #e2e8f0;
}

.aio-filter-header h3,
.aio-results-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 10px;
}

.aio-filter-header h3 i,
.aio-results-header h3 i {
  color: #6366f1;
}

.aio-filter-form {
  padding: 24px;
}

.aio-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-end;
}

.aio-filter-group {
  flex: 1;
  min-width: 200px;
}

.aio-filter-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
}

.aio-input-icon {
  position: relative;
}

.aio-input-icon i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}

.aio-input {
  width: 100%;
  padding: 12px 12px 12px 42px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background: #fff;
}

.aio-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.aio-filter-button {
  flex: 0 0 auto;
}

/* Results Content */
.aio-results-content {
  padding: 24px;
  min-height: 200px;
}

/* Empty State */
.aio-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #64748b;
}

.aio-empty-state i {
  font-size: 4rem;
  color: #cbd5e1;
  margin-bottom: 20px;
  display: block;
}

.aio-empty-state p {
  font-size: 1.1rem;
  margin: 0;
}

/* Login Prompt */
.aio-login-prompt {
  text-align: center;
  padding: 80px 40px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
}

.aio-login-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}

.aio-login-icon i {
  font-size: 2.5rem;
  color: #fff;
}

.aio-login-prompt h3 {
  font-size: 1.5rem;
  color: #1e293b;
  margin: 0 0 12px 0;
}

.aio-login-prompt p {
  color: #64748b;
  font-size: 1.05rem;
  margin: 0 0 24px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .aio-profile-header {
    flex-direction: column;
    text-align: center;
    padding: 24px;
  }

  .aio-profile-info {
    text-align: center;
  }

  .aio-profile-actions {
    justify-content: center;
    width: 100%;
  }

  .aio-filter-row {
    flex-direction: column;
  }

  .aio-filter-group {
    width: 100%;
  }

  .aio-btn {
    width: 100%;
    justify-content: center;
  }
}

/* DataTables Integration for Employee Profile */
#reportResults .dataTables_wrapper,
#employeeReportTable_wrapper {
  padding: 0;
}

/* Employee Report Table Styling */
#employeeReportTable {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

#employeeReportTable thead th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  font-weight: 600;
  padding: 16px 20px;
  text-align: left;
  border: none;
  white-space: nowrap;
}

#employeeReportTable thead th:first-child {
  border-radius: 8px 0 0 0;
}

#employeeReportTable thead th:last-child {
  border-radius: 0 8px 0 0;
}

#employeeReportTable tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  vertical-align: middle;
}

#employeeReportTable tbody tr {
  background: #fff;
  transition: all 0.2s ease;
}

#employeeReportTable tbody tr:hover {
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#employeeReportTable tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

#employeeReportTable tbody tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

/* Shift Total Row */
#employeeReportTable tfoot td,
#reportResults .shift-total,
.aio-shift-total {
  background: #f1f5f9;
  font-weight: 700;
  color: #1e293b;
  padding: 14px 20px;
  border-top: 2px solid #e2e8f0;
}

/* Action buttons in table */
#employeeReportTable .aio-action-btn,
#employeeReportTable button,
#employeeReportTable .button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 2px;
}

/* Approved status styling */
#employeeReportTable td:nth-child(5) {
  font-weight: 600;
}

/* DataTables controls styling */
#employeeReportTable_wrapper .dataTables_length,
#employeeReportTable_wrapper .dataTables_filter {
  padding: 16px 0;
}

#employeeReportTable_wrapper .dataTables_length select,
#employeeReportTable_wrapper .dataTables_filter input {
  padding: 8px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  margin: 0 8px;
}

#employeeReportTable_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#employeeReportTable_wrapper .dataTables_info {
  padding: 16px 0;
  color: #64748b;
}

#employeeReportTable_wrapper .dataTables_paginate {
  padding: 16px 0;
}

#employeeReportTable_wrapper .dataTables_paginate .paginate_button {
  padding: 8px 14px;
  margin: 0 4px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

#employeeReportTable_wrapper .dataTables_paginate .paginate_button:hover {
  background: #6366f1;
  color: #fff !important;
  border-color: #6366f1;
}

#employeeReportTable_wrapper .dataTables_paginate .paginate_button.current {
  background: #6366f1;
  color: #fff !important;
  border-color: #6366f1;
  font-weight: 600;
}

#employeeReportTable_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#reportResults table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0;
}

#reportResults table.dataTable thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
}

#reportResults table.dataTable tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
}

#reportResults table.dataTable tbody tr:hover {
  background: #f8fafc;
}

#reportResults .dataTables_info,
#reportResults .dataTables_paginate {
  padding: 16px 0;
}

#reportResults .dataTables_paginate .paginate_button {
  padding: 8px 14px;
  margin: 0 4px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569 !important;
  cursor: pointer;
}

#reportResults .dataTables_paginate .paginate_button.current,
#reportResults .dataTables_paginate .paginate_button:hover {
  background: #6366f1 !important;
  color: #fff !important;
  border-color: #6366f1;
}

/* -------------------------------------------------------
   Manager Profile Specific Styles
   ------------------------------------------------------- */

/* Manager header with different gradient */
.aio-manager-header {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  box-shadow: 0 10px 40px rgba(14, 165, 233, 0.3);
}

.aio-profile-role {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.aio-profile-role i {
  width: 20px;
  margin-right: 8px;
  opacity: 0.8;
}

/* Select inputs styling */
.aio-select {
  padding-left: 42px !important;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

/* Filter actions row */
.aio-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

/* Secondary outline button */
.aio-btn-secondary-outline {
  background: transparent;
  color: #475569;
  border: 2px solid #e2e8f0;
}

.aio-btn-secondary-outline:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #334155;
  text-decoration: none;
}

/* Bulk Actions Bar */
.aio-bulk-actions {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 16px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.2);
}

.aio-bulk-actions-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.aio-bulk-label {
  font-weight: 600;
  color: #92400e;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aio-bulk-label i {
  font-size: 1.1rem;
}

/* Small button variant */
.aio-btn-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
}

/* Danger button */
.aio-btn-danger {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

.aio-btn-danger:hover {
  background: #dc2626;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
  color: #fff;
  text-decoration: none;
}

/* Warning button */
.aio-btn-warning {
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.aio-btn-warning:hover {
  background: #d97706;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
  color: #fff;
  text-decoration: none;
}

/* Manager Report Table Styling */
#managerReportTable {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
}

#managerReportTable thead th {
  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
  color: #fff;
  font-weight: 600;
  padding: 16px 20px;
  text-align: left;
  border: none;
  white-space: nowrap;
}

#managerReportTable thead th:first-child {
  border-radius: 8px 0 0 0;
}

#managerReportTable thead th:last-child {
  border-radius: 0 8px 0 0;
}

#managerReportTable tbody td {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
  vertical-align: middle;
}

#managerReportTable tbody tr {
  background: #fff;
  transition: all 0.2s ease;
}

#managerReportTable tbody tr:hover {
  background: #f8fafc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#managerReportTable tbody tr:last-child td:first-child {
  border-radius: 0 0 0 8px;
}

#managerReportTable tbody tr:last-child td:last-child {
  border-radius: 0 0 8px 0;
}

/* Shift Total Row in manager table */
#managerReportTable #totalDiv {
  background: #f1f5f9;
  font-weight: 700;
  color: #1e293b;
}

#managerReportTable #totalDiv td {
  padding: 14px 20px;
  border-top: 2px solid #e2e8f0;
}

/* Action buttons in manager table */
#managerReportTable .aio_generic_button_small {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  margin: 2px;
}

/* DataTables controls for manager table */
#managerReportTable_wrapper .dataTables_length,
#managerReportTable_wrapper .dataTables_filter {
  padding: 16px 0;
}

#managerReportTable_wrapper .dataTables_length select,
#managerReportTable_wrapper .dataTables_filter input {
  padding: 8px 12px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  margin: 0 8px;
}

#managerReportTable_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#managerReportTable_wrapper .dataTables_info {
  padding: 16px 0;
  color: #64748b;
}

#managerReportTable_wrapper .dataTables_paginate {
  padding: 16px 0;
}

#managerReportTable_wrapper .dataTables_paginate .paginate_button {
  padding: 8px 14px;
  margin: 0 4px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

#managerReportTable_wrapper .dataTables_paginate .paginate_button:hover {
  background: #6366f1;
  color: #fff !important;
  border-color: #6366f1;
}

#managerReportTable_wrapper .dataTables_paginate .paginate_button.current {
  background: #6366f1;
  color: #fff !important;
  border-color: #6366f1;
  font-weight: 600;
}

#managerReportTable_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Export buttons styling */
.aio-export-buttons {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
  margin-top: 16px;
}

/* Responsive for manager profile */
@media (max-width: 768px) {
  .aio-bulk-actions-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .aio-bulk-actions .aio-btn {
    width: 100%;
    justify-content: center;
  }

  .aio-filter-actions {
    flex-direction: column;
  }

  .aio-filter-actions .aio-btn {
    width: 100%;
    justify-content: center;
  }
}

/* DataTables Export Buttons */
.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.dt-buttons .dt-button,
.dt-buttons .aio-dt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.dt-buttons .dt-button:hover,
.dt-buttons .aio-dt-btn:hover {
  background: linear-gradient(180deg, #f9fafb 0%, #e5e7eb 100%);
  border-color: #9ca3af;
  color: #111827;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dt-buttons .dt-button:active,
.dt-buttons .aio-dt-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

.dt-buttons .dt-button i,
.dt-buttons .aio-dt-btn i {
  font-size: 14px;
  color: #6b7280;
}

.dt-buttons .dt-button:hover i,
.dt-buttons .aio-dt-btn:hover i {
  color: #374151;
}

/* Specific button colors */
.dt-buttons .buttons-csv,
.dt-buttons .buttons-excel {
  color: #047857;
}

.dt-buttons .buttons-csv i,
.dt-buttons .buttons-excel i {
  color: #059669;
}

.dt-buttons .buttons-pdf {
  color: #b91c1c;
}

.dt-buttons .buttons-pdf i {
  color: #dc2626;
}

.dt-buttons .buttons-print {
  color: #1d4ed8;
}

.dt-buttons .buttons-print i {
  color: #2563eb;
}

/* DataTables search and info styling for front-end */
.aio-results-card .dataTables_wrapper .dataTables_filter {
  margin-bottom: 16px;
}

.aio-results-card .dataTables_wrapper .dataTables_filter input {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  min-width: 200px;
}

.aio-results-card .dataTables_wrapper .dataTables_filter input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.aio-results-card .dataTables_wrapper .dataTables_info {
  color: #6b7280;
  font-size: 13px;
  padding: 12px 0;
}

@media (max-width: 640px) {
  .dt-buttons {
    flex-direction: column;
  }

  .dt-buttons .dt-button,
  .dt-buttons .aio-dt-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   Shift Action Buttons (Employee Profile)
   ======================================== */
.aio-shift-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.aio-shift-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.aio-shift-btn i {
  font-size: 12px;
}

.aio-shift-btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

.aio-shift-btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.aio-shift-btn-secondary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.aio-shift-btn-secondary:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.aio-shift-btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.aio-shift-btn-success:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* ========================================
   Edit Shift Modal Styles
   ======================================== */
.aio-shift-edit-form {
  text-align: left;
  padding: 10px 0;
}

.aio-shift-field {
  margin-bottom: 16px;
}

.aio-shift-field:last-child {
  margin-bottom: 0;
}

.aio-shift-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.aio-shift-field-label i {
  color: #6b7280;
  width: 16px;
}

.aio-shift-input,
.aio-shift-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #1f2937;
  background: white;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.aio-shift-input:focus,
.aio-shift-select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.aio-shift-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* SweetAlert Custom Styles for Shift Edit */
.aio-swal-popup {
  border-radius: 12px !important;
}

.aio-swal-large {
  max-width: 500px !important;
}

.aio-swal-html {
  margin: 0 !important;
  padding: 16px 24px !important;
}

.aio-swal-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.aio-loader {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: aio-spin 0.8s linear infinite;
}

@keyframes aio-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments for shift buttons */
@media (max-width: 768px) {
  .aio-shift-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .aio-shift-btn {
    justify-content: center;
    width: 100%;
  }
}