/*****************************
 * crdt.css — Legacy jQuery DataTables Skin
 * Rules here only apply to pages that render the old #crTable
 * DataTables-driven tables. Depends on the CSS custom properties
 * (--accent-color, --text-color, --zebra-bg, --darker-border,
 * --border-color) defined in crdb.css's :root block.
 ****************************/

/*****************************
 * Main Table Styling
 ****************************/

.crTable {
  border: none;
  border-spacing: 0;
  border-collapse: separate !important;
  background-color: #fff;
  width: 100%;
  text-align: left;
  table-layout: fixed;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;

  overflow: hidden; /* Ensures that the rounded corners affect the table's content */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
  position: relative; /* Required for positioning the bottom border */
}

/* Hover effect for links within table rows */
.crTable tbody tr:hover a, .crTable tbody tr:hover a:hover {
  color: var(--text-color);
}

/* Ensure text wraps within table cells */
.crTable td, .crTable th {
  border: 0; /* Remove borders from table cells */
  text-transform: none;
}

/* General cell styling */
.crTable td, .crTable th {
  padding-top: 15px !important; /* 10px top and bottom, 5px left and right */
  padding-bottom: 15px !important;
}

/* Zebra striping for table rows */
.crTable tr:nth-child(even) {
  background: var(--zebra-bg); /* Darker zebra stripe color */
}

/* Simulate row borders using box-shadow */
.crTable tr {
  box-shadow: 0 1px 0 0 #888888; /* Darker gray for more visible separation */
}

/* Table header styling */
.crTable thead {
  background: var(--accent-color);
  border-bottom: 2px solid #444;
}

/* Header text styling */
.crTable thead th, .crTable thead .sorting {
  font-size: 13px;
  font-weight: bold;
  color: var(--text-color);
  border-left: 0;
}

/* Highlight table row on hover */
.crTable tbody tr:hover {
  background-color: var(--accent-color);
  color: var(--text-color);
  transition: background-color 0.3s ease; /* Smooth transition for row hover */
}

/* Hide tfoot by default */
.crTable tfoot {
  display: none;
}

/* Give the footer the same color border to match the box shadow */
.crTable tfoot tr th {
  border-top-color: #888888 !important;
}

/* Thick border at the bottom of the table */
.crTable::after {
  content: '';
  display: block;
  width: 100%;
  height: 4px; /* Adjust thickness as needed */
  background: var(--accent-color); /* Accent color for the border */
  position: absolute;
  bottom: 0;
  left: 0;
}

@media only screen and (min-width: 1140px) {
  /* Fade effect with ellipses for the title column */
  .crTable td.title, .release_updates tr td:first-child,
  .crTable td.format
  {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis; /* Show ellipsis when text is too long */
    white-space: nowrap; /* Keep text in a single line initially */
    transition: white-space 0.3s, text-overflow 0.3s; /* Smooth transition */
  }

  /* Transition to word wrap on hover */
  .crTable tr:focus-within td.title, .release_updates tr:focus-within td:first-child,
  .crTable tr:focus-within td.format
  {
    white-space: normal; /* Allow text to wrap */
    overflow: visible; /* Show full text on hover */
    text-overflow: clip; /* Remove ellipsis on hover */
  }
}

/*****************************
 * Release Updates Styling
 ****************************/

 .release_updates th.new-date,
 .release_updates th.old-date
 {
  width: 90px;
 }

/*****************************
 * Bulk Edit Styling
 ****************************/

 .bulk-edit-mode * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Custom checkbox styling */
.bulk-edit-checkbox {
  appearance: none; /* Remove default checkbox appearance */
  width: 20px;
  height: 20px;
  background-color: var(--light-bg); /* Match theme background */
  border: 2px solid var(--border-color); /* Light gray border */
  border-radius: 4px; /* Rounded corners */
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Checkbox checked state styling */
.bulk-edit-checkbox:checked {
  background-color: var(--accent-color); /* Accent color for checked state */
  border-color: var(--accent-color); /* Accent color for border */
  position: relative;
}

/* Checkmark styling inside checked checkbox */
.bulk-edit-checkbox:checked::after {
  content: '\2714'; /* Unicode checkmark */
  font-size: 14px;
  color: var(--text-color); /* White checkmark color */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Checkbox hover effect */
.bulk-edit-checkbox:hover {
  border-color: var(--accent-color); /* Accent color on hover */
  transition: border-color 0.3s ease;
}

/* Focus effect for accessibility */
.bulk-edit-checkbox:focus {
  box-shadow: 0 0 0 3px rgba(173, 17, 17, 0.4); /* Red focus ring */
}

/*****************************
 * DataTables Details Styling
 ****************************/

.dtr-details, .dtr-details td, .dtr-details tr {
  border: 0px;
  padding: 0px;
}

/********************************
 * Filter Container Styling
 *******************************/

/* New wrapper for checkbox containers */
#checkbox-container-wrapper {
  display: block; /* Simple block layout */
}

/* Style for each checkbox container */
.checkbox-container {
  display: inline-block;
  height: 150px; /* Adjust the height as needed */
  overflow-y: auto; /* Scroll if content overflows */
  padding: 0; /* Remove padding to avoid space at the top */
  border: 1px solid var(--darker-border);
  margin: 0 10px 10px 0; /* Add space to the right and bottom of each container */
  width: 110px; /* Adjust the width as needed */
  box-sizing: border-box; /* Include border and padding in the element's total width and height */
}

/* Sticky header for each container */
.checkbox-container .header-wrapper {
  position: sticky;
  top: 0;
  background-color: var(--accent-color); /* Ensure the background matches your design */
  color: var(--text-color); /* Adjust text color to match your theme */
  border-bottom: 1px solid var(--darker-border); /* Optional: Adds a border below the sticky header */
  padding: 0 5px; /* Padding for better spacing */
  z-index: 1; /* Ensure it is above other content */
  display: flex; /* Flex layout only for header for alignment */
  align-items: center;
  justify-content: space-between;
}

/* Reset filter button */
.checkbox-container .reset-filter {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--text-color); /* Adjust color to match your theme */
  padding: 0;
  margin-left: 10px;
}


/********************************
 * Checkbox Styling for Filters
 *******************************/

/* Style for checkbox items within each container */
.checkbox-item {
  margin-bottom: 5px; /* Space between items */
}

/* Base styling for checkboxes */
.checkbox-container input[type="checkbox"].filter-checkbox {
  appearance: none; /* Remove default checkbox appearance */
  width: 16px;
  height: 16px;
  background-color: var(--light-bg);
  border: 2px solid var(--border-color);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
  margin-right: 5px;
  vertical-align: middle;
  flex-shrink: 0; /* Prevents the checkbox from shrinking */
}

/* Checked state */
.checkbox-container input[type="checkbox"].filter-checkbox:checked {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  position: relative;
}

/* Checkmark */
.checkbox-container input[type="checkbox"].filter-checkbox:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Hover and focus states */
.checkbox-container input[type="checkbox"].filter-checkbox:hover,
.checkbox-container input[type="checkbox"].filter-checkbox:focus {
  border-color: #8d0f0f;
}

/* Label styling */
.checkbox-container label {
  color: #333; /* Text color */
  cursor: pointer;
  user-select: none;
}

/* Universal Mobile Scrollbar Fix */
.checkbox-container-wrapper {
  touch-action: auto; /* Ensures touch scrolling is recognized */
  -webkit-overflow-scrolling: touch; /* For iOS smooth scrolling */
  overflow-y: scroll !important; /* Ensures scrollbar visibility on mobile */
  scrollbar-width: thin !important; /* Thin scrollbar for Firefox */
}

#checkbox-tracking .checkbox-item {
  display: flex;
  align-items: center; /* Vertically centers the label with the checkbox */
}

#checkbox-tracking .checkbox-item label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Optional: adds "..." at the end of the truncated text */
  max-width: 100%; /* You can set a specific width or let it adapt based on the container */
  display: inline-block;
}

/*****************************
 * Define Widths for Table Headers
 ****************************/

 #dt-release { width: 50px !important; }
 #dt-format { width: 61px !important; }
 #dt-status { width: 50px !important; }
 #dt-retailer { width: 53px !important; }
 #dt-order-id { width: 70px !important; }
 #dt-price-paid { width: 70px !important; }
 #dt-shipper { width: 50px !important; }
 #dt-tracking { width: 100px !important; }
 #dt-received { width: 60px !important; }
 #dt-comments { width: 125px !important; }
 #dt-added { width: 50px !important; }
 #dt-modified { width: 60px !important; }
 #dt-publisher { width: 65px !important; }
 #dt-code { width: 65px !important; }
 #dt-isbn { width: 75px !important; }
 #dt-price { width: 60px !important; }
 #dt-pages { width: 60px !important; }
 #dt-user { width: 60px !important; }
 #dt-distributor { width: 100px !important; }
 #dt-reference { width: 140px !important; }
 #dt-affiliate { width: 223px !important; }
 #dt-watchlist { width: 223px !important; }
 #dt-admin { width: 100px !important; }
 #dt-action { width: 35px !important; }
 #dt-actionwl { width: 75px !important; }
 #dt-checkbox { width: 25px; }

/*****************************
 * Define Widths for Table Filters
 * (Default width is 110px)
 ****************************/

#checkbox-tracking,
#checkbox-status,
#checkbox-format,
#checkbox-publisher
{
  width: 150px !important;
}

/*****************************
 * DataTables Sticky Table Header
 ****************************/

.crTable {
    overflow: visible !important;
}

#crTable thead {
    background: none !important;
    border: none !important;
}

/* THE TABLE HEADER (#crTable thead th) */
#crTable thead th {
    position: sticky !important;
    top: 54px !important;
    z-index: 999 !important;
    background-color: #AD1111 !important;
    color: #fff !important;
}

.admin-bar #crTable thead th { top: calc(32px + 54px) !important; }

/* THE 2PX SHELF & ROUNDING */
#crTable thead th::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
}

#crTable thead th:nth-child(2),
#crTable thead th:nth-child(2)::before {
    border-top-left-radius: 8px !important;
}

#crTable thead th:last-child,
#crTable thead th:last-child::before {
    border-top-right-radius: 8px !important;
}

@media screen and (max-width: 1024px) {
    /* Keeps your specific table header tweak intact where needed */
    .admin-bar #crTable thead th {
        top: 54px !important;
    }
}

/*****************************
 * Fix Dumb Bootstrap Stuff
 ****************************/

/* 1. Clear out the default Bootstrap 3 layout crowding */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    position: relative;
    padding-right: 26px !important; /* Creates space for the icon */
}

/* 2. Target the pseudo-element and force Font Awesome 6 */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    position: absolute !important;
    right: 8px !important;
    bottom: 50% !important;
    transform: translateY(50%); /* Centers it vertically */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    opacity: 0.5;
}

/* 3. Assign the modern Font Awesome 6 icon characters */
table.dataTable thead th.sorting::after { content: "\f0dc" !important; }      /* Light up/down sort split arrow */
table.dataTable thead th.sorting_asc::after { content: "\f0de" !important; opacity: 1 !important; }  /* Solid up arrow */
table.dataTable thead th.sorting_desc::after { content: "\f0dd" !important; opacity: 1 !important; } /* Solid down arrow */

/*****************************
 * Container and DataTables Styling
 ****************************/

.dataTable {
  width: 100%;
}

/*****************************
 * Floating Action Button
 ****************************/

/* Floating Action Button */
.fabutton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--accent-color);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

/* Hover effect for FAB */
.fabutton:hover {
  background-color: #8c0a0a;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  transform: translateY(-3px) scale(1.05); /* Restored hover effect */
}

/* FAB Modal */
.fab-modal {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 300px;
  background: linear-gradient(135deg, #f0f0f0, #fff);
  border-radius: 15px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  border: 1px solid #ccc;
}

/* FAB Modal Content */
.fab-modal-content {
  padding: 30px 20px 20px 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  border-radius: 10px;
}

/* FAB Modal Close Button */
.fab-modal-close {
  position: absolute;
  top: 5px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: var(--accent-color);
  transition: color 0.3s;
}

/* Close Button Hover Effect */
.fab-modal-close:hover {
  color: #8c0a0a;
}

/* FAB Links */
.fab-links a {
  display: inline-block;
  padding: 12px 15px;
  color: var(--accent-color);
  text-decoration: none;
  border-bottom: 1px solid #eee;
  transition: background-color 0.3s, padding 0.3s, color 0.3s;
  font-weight: 500;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
}

/* Last link without bottom border */
.fab-links a:last-child {
  border-bottom: none;
}

/* FAB Link Hover Effect */
.fab-links a:hover {
  background-color: #f5f5f5;
  padding-left: 25px;
  color: #8c0a0a;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* Add smooth opening effect */
.fab-modal {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*****************************
 * Floating Scroll to Anchor Button
 *****************************/

 .scroll-to-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: 20px;
  left: 50%;
  background-color: var(--accent-color);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:  0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
}

/* Font Awesome icon styling */
.scroll-to-anchor i {
  font-size: 20px;
  line-height: 0;
  color: #fff;
}

.scroll-to-anchor .fas {
  color: #fff;
}

/* Hover effect */
.scroll-to-anchor:hover {
  background-color: #8c0a0a;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  text-decoration: none !important;
  transform: translateY(-2px);
}