/* Taken from https://www.figma.com/design/BJNHvdL9j4WCPxN5y3UVbz/NEW-DELPHIUS?node-id=12166-8282&p=f&t=IecbUgvGbmOx1uTD-0 */
/* COLLAPSABLECONTAINER */
.collapse-header-left {
  display: flex;
  align-items: center;
  flex-grow: 1;
  /* So it fills the left space */
}
/* Phone number */
.flex-content {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
/* Card Expiry */
.expiry-wrapper {
  position: relative;
  display: inline-block;
}
.expiry-dropdown {
  position: absolute;
  top: 100%;
  z-index: 9999;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
}
/* Primary disable button */
.custom-disabled-button.mud-button {
  background-color: var(--mud-palette-primary) !important;
  color: var(--mud-palette-primary-text) !important;
  opacity: 0.6;
  pointer-events: none;
}
.cancel-disabled-button.mud-button {
  background-color: var(--mud-palette-default) !important;
  color: var(--mud-palette-default-text) !important;
  opacity: 0.6;
  pointer-events: none;
}
/* Multi select */
.mud-list-subheader {
  padding: 8px 2px;
}
.mud-list-item {
  padding: 2px 8px;
}
/* More specific selector to override MudBlazor */
.mud-expand-panel.custom-expansion-panel .mud-expand-panel-header {
  padding: 8px 12px;
  /* or whatever values you prefer */
}
.progress-circle-wrapper {
  position: relative;
  width: 60px;
  /* match Size.Large visually */
  height: 60px;
  display: inline-block;
  margin-right: 8px;
  /* spacing from text */
}
.progress-circle-bg,
.progress-circle-fg {
  position: absolute;
  top: 0;
  left: 0;
}
.progress-text {
  position: absolute;
  top: 46%;
  left: 45%;
  transform: translate(-46%, -45%);
  font-size: 0.75rem;
  /* adjust as needed */
  font-weight: 600;
  color: black;
  z-index: 2;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.green-check {
  font-size: 28px;
  color: green;
  top: 42%;
  left: 42%;
  transform: translate(-42%, -42%);
  position: absolute;
}
.custom-dialog {
  width: 550px;
  max-width: 95%;
  max-height: 96vh;
}
.custom-dialog .mud-dialog-title {
  background-color: #4465E1;
  color: white;
  padding: 16px;
  /*min-height: 56px;*/
  display: flex;
  align-items: center;
}
.custom-dialog .mud-dialog-title .mud-button-close {
  color: white;
  top: auto;
  padding: 1px;
}
/* make hover background transparent white */
.custom-dialog .mud-dialog-title .mud-button-close:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
}
.dialog-title-text {
  font-weight: 600;
}
.file-name {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}
.custom-dialog .mud-dialog-content {
  overflow-y: auto;
  max-height: calc(96vh - 100px);
}
.custom-dialog .mud-toolbar {
  height: 20px;
}
.cancel-icon-cursor-pointer {
  cursor: pointer;
  color: rgba(0, 0, 0, 0.54);
}
.cancel-icon-cursor-pointer:hover {
  color: black;
}
/* For Time Picker */
.time-select-wrapper {
  position: relative;
  display: inline-block;
}
.custom-popover {
  background-color: white !important;
  border: 1px solid #1976d2;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 2000 !important;
  width: 550px;
  height: 500px;
}
.popover-content {
  display: inline-flex;
  gap: 1rem;
  max-width: 550px;
  max-height: 500px;
  margin-top: 10px;
}
.time-list {
  width: 150px;
  max-height: 390px;
}
.time-list.scrollable {
  overflow-y: auto;
}
.time-item {
  padding: 0.5rem;
  cursor: pointer;
  font-size: 14px;
}
.time-item.sticky {
  position: sticky;
  top: 0;
  font-weight: bold;
  margin-bottom: 4px;
}
.time-item.selected {
  background-color: #1976d2;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.time-clock {
  display: flex;
  align-items: center;
}
.selected-big-time {
  font-size: 40px;
  padding-left: 40px;
}
.mud-icon-button:hover {
  background-color: white;
}
/* This is specifically intended to use the input field in Delphius, to ensure consistency with the existing inputs used there.
    From Delphius, the color code needs be passed as a parameter named FocusedBorderColor
*/
.custom-focus-border:focus-within fieldset.mud-input-outlined-border {
  border-color: var(--focus-border-color) !important;
  border-width: 1px !important;
  /* box-shadow: 0 0 0 2px var(--focus-border-shadow, transparent); */
}
.custom-focus-border input:focus {
  outline: none !important;
}
/*
=================================================
    PLEASE WAIT CONTROL
=================================================
*/
.please-wait {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  filter: grayscale(100%);
  z-index: 9990;
  --mud-typography-body2-size: 20px;
}
.please-wait.dark {
  background-color: rgba(0, 0, 0, 0.5);
}
/*
=================================================
    STICKY COLUMN TABLE CONTROL
=================================================
*/
/* #region STICKY COLUMN TABLE */
/* Scroll container so sticky works against it */
.table-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  /* hide stray vertical bar */
  position: relative;
}
/* MudTable’s built-in container shouldn’t scroll */
.sticky-col-table .mud-table-container {
  overflow: visible !important;
}
/* Keep header above body cells */
.sticky-col-table .mud-table-head th {
  z-index: 3;
}
/* ================= RIGHT (last) sticky ================= */
.sticky-col-table.has-sticky-right .mud-table-head th:last-child,
.sticky-col-table.has-sticky-right .mud-table-body td:last-child {
  position: sticky;
  right: 0;
  z-index: 100;
  /* above normal cells */
  background: var(--mud-palette-surface);
  width: var(--sticky-right-width, 140px);
  min-width: var(--sticky-right-width, 140px);
  max-width: var(--sticky-right-width, 140px);
  overflow: visible;
  border-left: none !important;
  border-right: none !important;
}
/* Also remove the right border on the column BEFORE the sticky one */
.sticky-col-table.has-sticky-right .mud-table-head th:nth-last-child(2),
.sticky-col-table.has-sticky-right .mud-table-body td:nth-last-child(2) {
  border-right: none !important;
}
/* Shadow on the LEFT edge of the right sticky column */
.sticky-col-table.has-sticky-right .mud-table-head th:last-child::after,
.sticky-col-table.has-sticky-right .mud-table-body td:last-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 101;
  /* above row borders */
  width: 10px;
  left: -10px;
  /* same offset for th + td */
  background: linear-gradient(to left, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}
/* ================= LEFT (first) sticky ================= */
.sticky-col-table.has-sticky-left .mud-table-head th:first-child,
.sticky-col-table.has-sticky-left .mud-table-body td:first-child {
  position: sticky;
  left: 0;
  z-index: 100;
  background: var(--mud-palette-surface);
  width: var(--sticky-left-width, 160px);
  min-width: var(--sticky-left-width, 160px);
  max-width: var(--sticky-left-width, 160px);
  overflow: visible;
  border-left: none !important;
  border-right: none !important;
}
/* Remove left border on the column AFTER the sticky one */
.sticky-col-table.has-sticky-left .mud-table-head th:nth-child(2),
.sticky-col-table.has-sticky-left .mud-table-body td:nth-child(2) {
  border-left: none !important;
}
/* Shadow on the RIGHT edge of the left sticky column */
.sticky-col-table.has-sticky-left .mud-table-head th:first-child::after,
.sticky-col-table.has-sticky-left .mud-table-body td:first-child::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 101;
  width: 10px;
  right: -10px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0));
}
/* ================= Rows ================= */
.sticky-col-table .mud-table-body .mud-table-row > td {
  white-space: nowrap;
}
/* #endregion */
/* This is for ALL table headers for each column in a table */
.table-header {
  font-weight: 800 !important;
  font-size: 14px !important;
}
.custom-table-header {
  font-weight: 800;
  vertical-align: middle;
  white-space: nowrap !important;
}
.mud-table thead {
  background-color: #f1f4fe;
  color: black;
  height: 56px;
  min-height: 56px !important;
}
/* Add glow/box-shadow for highlighted row */
.mud-table .row-glow {
  box-shadow: 0 0 8px 2px #6381F5, 0 2px 8px rgba(99, 129, 245, 0.15);
  border-radius: 6px;
  background: #f8faff;
  transition: box-shadow 1s;
}
.mud-table .row-edit {
  box-shadow: 0 0 2px 0px #4465E1;
  transition: box-shadow 1s;
}
.w-20p {
  width: 20%;
}
.w-15p {
  width: 15%;
}
/* For tables within MudTabs, the margin is unavoidable unless we do this */
.mud-tabs-panels .mud-table-container {
  padding: 0 !important;
  margin: 0 !important;
}
.tag-input-container {
  position: relative;
  width: 100%;
}
.tag-input-label {
  position: absolute;
  top: -10px;
  left: 12px;
  background: white;
  padding: 0 4px;
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.6);
}
.tag-input-box {
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1.5px solid rgba(0, 0, 0, 0.6);
  /* darker border */
  border-radius: 6px;
}
.tag-input-field {
  flex: 1;
  min-width: 80px;
  border: none !important;
  outline: none !important;
}
.tag-input-helper {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
  margin-top: 2px;
  padding-right: 4px;
}
/* #region TIME AND DATE CELL */
.date-top,
.time-sub {
  display: block !important;
}
.date-top {
  font-weight: 600 !important;
}
.time-sub {
  color: var(--mud-palette-text-secondary);
  font-size: 0.7rem !important;
}
/* #endregion */