/*----------------------------------------------------------------------------*/
/* MANAGE CATEGORIES                                                          */
/*----------------------------------------------------------------------------*/

#category-bar
{
  margin-bottom: 2rem; /* add space below the category tab bar so table is not glued to it */
  /* Arrange category buttons in a row and add horizontal space between them */
  display: flex;
  gap: 0.6rem; /* horizontal space between elements */
  flex-wrap: wrap; /* allow wrapping on small screens */
  align-items: center; /* vertical alignment for the buttons */
  justify-content: left; /* horizontal centering of the buttons */
}

#main-table
{
  margin-bottom: 1rem;
  min-height: 320px;
}

/* Remove any default margins from buttons inside the bar so the gap is used consistently */
#category-bar button {
  margin: 0;
}

/* The toolbar used on the manage-categories page. Keep some space under it */
.page-toolbar
{
  margin-bottom: 1.25rem; /* buffer between the toolbar and the table */
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* Distinguish filter/category buttons from page action buttons */
#category-bar button.category-button
{
  /* Cleanly shaped filter buttons with reduced roundness and muted color */
  background-color: #ffffff;
  border: 1px solid #d6eaf3; /* soft blue-ish / almost gray */
  color: #1d5f6e; /* muted deep blue */
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.45rem 1rem;
  border-radius: 8px; /* less round */
  min-width: 100px;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#category-bar button.category-button:hover
{
  background-color: #f8fbfd; /* very subtle tint */
  border-color: #bcdff0; /* subtle color lift */
  color: #123d47; /* slightly darker text on hover */
}

/* Slightly subdued focus outline for accessibility */
#category-bar button.category-button:focus
{
  outline: none;
  box-shadow: 0 0 0 3px rgba(69,185,234,0.15);
}

/* Active category button (selected state) — refined color scheme */
#category-bar button.category-button.active,
#category-bar button.category-button[aria-pressed="true"] {
  background-color: #42b4e6;      /* same blue as .button / table actions */
  color: #ffffff;                 /* white text for contrast */
  border-color: #2f9ad1;         /* slightly darker border for definition */
  box-shadow: 0 1px 3px rgba(0,0,0,0.10);
}

#category-bar button.category-button.active:hover,
#category-bar button.category-button[aria-pressed="true"]:hover {
  background-color: #3aa9dd;
  border-color: #2b8fbf;
}

/* Reduce visual impact for 'All' and 'Others' by matching their scope to others */
#category-bar button.category-button[data-type="show-all"],
#category-bar button.category-button[data-type="show-others"]
{
  min-width: 115px;
}

/*----------------------------------------------------------------------------*/
/* TABULATOR FIXES                                                            */
/*----------------------------------------------------------------------------*/

/* Small overrides to fix vertical centering within Tabulator cells */
/* Tabulator sets an inline height (defaults to 40px) and uses flex; we add
   align-items to vertically center content inside the cell. */
.tabulator .tabulator-cell {
  /* Ensure the cell uses flexbox and center the contents vertically */
  display: inline-flex; /* Tabulator already uses this but duplicate is ok */
  align-items: center;
}

/* Optional: ensure buttons inside cells remain vertically centered */
.tabulator .tabulator-cell .table-button {
  align-items: center;
}

/* Remove Tabulator's default zebra striping for the main table only.
   Tabulator adds `tabulator-row-even` to even rows, and its stylesheet
   sets a different background (zebra effect). We override it here for
   the `#main-table` element so all rows share the same background.
   Use `!important` to ensure this override wins against tabulator.min.css. */
#main-table .tabulator-row.tabulator-row-even {
  background-color: inherit !important;
}


/* Ensure the base row background stays consistent for the main table. */
#main-table .tabulator-row {
  background-color: #fff !important;
}

/* Make the cell borders more visible inside the main tabulator element. */
#main-table .tabulator-row .tabulator-cell {
  border-right: 1px solid #bdbdbd !important; /* slightly darker gray for contrast */
  border-bottom: 1px solid #bdbdbd !important;
}

/* Ensure the row header (left column) also shows a border to separate it from the body */
#main-table .tabulator-row .tabulator-cell.tabulator-row-header {
  border-right: 1px solid #a9a9a9 !important;
}

/* Header cells also have explicit border to match the rows */
#main-table .tabulator-header .tabulator-col,
#main-table .tabulator-header .tabulator-col .tabulator-col-content {
  border-right: 1px solid #bdbdbd !important;
}

/* Projects table header — light, matching the blue tab style */
#main-table .tabulator-header,
#main-table .tabulator-header .tabulator-col,
#main-table .tabulator-header .tabulator-col .tabulator-col-content {
  background: linear-gradient(180deg,#f7fbff 0%,#edf6fb 100%) !important; /* soft blue-ish tint */
  border-bottom: 1px solid dark !important; /* single 1px divider under header */
}

#main-table .tabulator-header .tabulator-col .tabulator-col-title {
  color: #27566b !important;  /* same family as category buttons text */
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Light vertical dividers between header cells */
#main-table .tabulator-header .tabulator-col,
#main-table .tabulator-header .tabulator-col .tabulator-col-content {
  border-right: 1px solid #d5e3ee !important;
}

/* On hover, very small lift without adding dark lines */
#main-table .tabulator-header .tabulator-col:hover {
  background: linear-gradient(180deg,#f1f9ff 0%,#e3f2fb 100%) !important;
}

/*----------------------------------------------------------------------------*/
/* TABULATOR: SELECTED ROW STYLE                                              */
/*----------------------------------------------------------------------------*/

#main-table .tabulator-row.tabulator-selected {
  background-color: #E9F3FF !important; /* Soft blue highlight */
  color: #052A4A !important;           /* Dark blue text for contrast */
  font-weight: 600;                    /* Slightly bolder text */
}

/* Slightly deeper color while hovering a selected row */
#main-table .tabulator-row.tabulator-selected:hover {
  background-color: #cfe8ff !important;
}

/* Make buttons inside a selected row more prominent */
#main-table .tabulator-row.tabulator-selected .table-button {
  background-color: #42b4e6 !important; /* match .button color */
  color: #fff !important;
}

/* Optional: add an accent left border to further highlight the selected row */
#main-table .tabulator-row.tabulator-selected .tabulator-cell:first-child {
  box-shadow: inset 6px 0 0 0 #42b4e6; /* accent bar */
}

/*----------------------------------------------------------------------------*/
/* TABULATOR: LINKS                                                           */
/*----------------------------------------------------------------------------*/

.project-link
{
  color: black;
  text-decoration: none;
}

.project-link:visited
{
  color: black;
}

.project-link:hover
{
  text-decoration: underline;
}

/*----------------------------------------------------------------------------*/
/* MANAGE CATEGORIES                                                          */
/*----------------------------------------------------------------------------*/

/* Smaller delete button in category column headers */
.category-header-button
{
  background: transparent;
  border: 1px solid #d7d7d7;
  border-radius: 4px;
  padding: 2px 6px; /* smaller padding to reduce vertical height */
  line-height: 1;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: small;
  color: blue;
}

/* Ensure the checkbox in Tabulator columns is vertically centered and not oversized */
#main-table .tabulator-cell .category-checkbox,
#main-table .tabulator-cell input[type="checkbox"]
{
  margin: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

/*----------------------------------------------------------------------------*/
/* ALT-INDEX                                                                  */
/*----------------------------------------------------------------------------*/

/* Remove dark gray color that SE find ugly */
#main-table.tabulator {
  background-color: unset;
}

/* Actions toolbar inside tabulator: add left space */
#main-table .tabulator-row .tabulator-cell .toolbar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;    /* spacing between buttons */
  padding-left: 1rem; /* space between left cell border and first button */
}