@use "react-big-calendar/lib/sass/styles" as rbc;

:root {
  --table-stripe-bg: #f4f4f4; /* Light mode table stripe */
  --menu-divider-color: #74695c; /* Light mode menu divider */
  --menu-submenu-text: rgba(255, 255, 255, 0.65); /* Light mode submenu text */
  --kanban-column-bg: #ddd; /* Light mode kanban column */
  --alert-color: blue; /* Light mode alert */
  --completion-soon-color: rgba(255, 140, 0, 0.8); /* Light mode completion soon */
  --completion-past-color: rgba(255, 0, 0, 0.8); /* Light mode completion past */
  --job-line-manual-color: tomato; /* Light mode job line manual */
  --muted-button-color: lightgray; /* Light mode muted button */
  --muted-button-hover-color: darkgrey; /* Light mode muted button hover */
  --table-border-color: #ddd; /* Light mode table border */
  --table-hover-bg: #f5f5f5; /* Light mode table hover */
  --popover-bg: #fff; /* Light mode popover background */
  --error-text: red; /* Light mode error message */
  --no-jobs-text: #888; /* Light mode no jobs message */
  --message-yours-bg: #eee; /* Light mode yours message background */
  --message-mine-bg-start: #00d0ea; /* Light mode mine message gradient start */
  --message-mine-bg-end: #0085d1; /* Light mode mine message gradient end */
  --message-mine-text: white; /* Light mode mine message text */
  --message-mine-tail-bg: white; /* Light mode mine/yours message tail */
  --system-message-bg: #f5f5f5; /* Light mode system message background */
  --system-message-text: #555; /* Light mode system message text */
  --system-label-text: #888; /* Light mode system label/date text */
  --message-icon-color: whitesmoke; /* Light mode message icon */
  --eula-card-bg: lightgray; /* Light mode eula card background */
  --notification-bg: #fff; /* Light mode notification background */
  --notification-text: rgba(0, 0, 0, 0.85); /* Light mode notification text */
  --notification-border: #d9d9d9; /* Light mode notification border */
  --notification-header-bg: #fafafa; /* Light mode notification header background */
  --notification-header-border: #f0f0f0; /* Light mode notification header border */
  --notification-header-text: rgba(0, 0, 0, 0.85); /* Light mode notification header text */
  --notification-toggle-icon: #1677ff; /* Light mode notification toggle icon */
  --notification-switch-bg: #1677ff; /* Light mode notification switch background */
  --notification-btn-link: #1677ff; /* Light mode notification link button */
  --notification-btn-link-hover: #69b1ff; /* Light mode notification link button hover */
  --notification-btn-link-disabled: rgba(0, 0, 0, 0.25); /* Light mode notification link button disabled */
  --notification-btn-link-active: #0958d9; /* Light mode notification link button active */
  --notification-read-bg: #fff; /* Light mode notification read background */
  --notification-read-text: rgba(0, 0, 0, 0.65); /* Light mode notification read text */
  --notification-unread-bg: #f5f5f5; /* Light mode notification unread background */
  --notification-unread-text: rgba(0, 0, 0, 0.85); /* Light mode notification unread text */
  --notification-item-hover-bg: #fafafa; /* Light mode notification item hover background */
  --notification-ro-number: #1677ff; /* Light mode notification RO number */
  --notification-relative-time: rgba(0, 0, 0, 0.45); /* Light mode notification relative time */
  --alert-bg: #fff1f0; /* Light mode alert background */
  --alert-text: rgba(0, 0, 0, 0.85); /* Light mode alert text */
  --alert-border: #ffa39e; /* Light mode alert border */
  --alert-message: #ff4d4f; /* Light mode alert message */
  --share-badge-bg: #cccccc; /* Light mode share badge background */
  --column-header-bg: #d0d0d0; /* Light mode column header background */
  --footer-bg: #d0d0d0; /* Light mode footer background */
  --tech-icon-color: orangered; /* Light mode tech icon color */
  --clone-border-color: #1890ff; /* Light mode clone border color */
  --event-arrived-bg: rgba(4, 141, 4, 0.4); /* Light mode arrived event background */
  --event-block-bg: tomato; /* Light mode block event background */
  --event-selected-bg: slategrey; /* Light mode selected event background */
  --task-bg: #fff; /* Light mode task center background */
  --task-text: rgba(0, 0, 0, 0.85); /* Light mode task text */
  --task-border: #d9d9d9; /* Light mode task border */
  --task-header-bg: #fafafa; /* Light mode task header background */
  --task-header-border: #f0f0f0; /* Light mode task header border */
  --task-section-bg: #f5f5f5; /* Light mode task section background */
  --task-section-border: #e8e8e8; /* Light mode task section border */
  --task-row-hover-bg: #f5f5f5; /* Light mode task row hover background */
  --task-row-border: #f0f0f0; /* Light mode task row border */
  --task-ro-number: #1677ff; /* Light mode task RO number */
  --task-due-text: rgba(0, 0, 0, 0.45); /* Light mode task due text */
  --task-button-bg: #1677ff; /* Light mode task button background */
  --task-button-hover-bg: #4096ff; /* Light mode task button hover background */
  --task-button-disabled-bg: #d9d9d9; /* Light mode task button disabled background */
  --task-button-text: white; /* Light mode task button text */
  --task-message-text: rgba(0, 0, 0, 0.45); /* Light mode task message text */
  --mask-bg: rgba(0, 0, 0, 0.05); /* Light mode mask background */
  --board-text-color: #393939; /* Light mode board text color */
  --section-bg: #e3e3e3; /* Light mode section background */
  --detail-text-color: #4d4d4d; /* Light mode detail text color */
  --card-selected-bg: rgba(128, 128, 128, 0.2); /* Light mode selected card background */
  --card-stripe-even-bg: #f0f2f5; /* Light mode even card background */
  --card-stripe-odd-bg: #ffffff; /* Light mode odd card background */
  --bar-border-color: #f0f2f5; /* Light mode bar border and background */
  --tag-wrapper-bg: #f0f2f5; /* Light mode tag wrapper background */
  --tag-wrapper-text: #000; /* Light mode tag wrapper text */
  --preview-bg: lightgray; /* Light mode preview background */
  --preview-border-color: #2196F3; /* Light mode preview border color */
  --event-bg-fallback: #c4c4c4; /* Light mode event background fallback */
  --card-bg-fallback: #ffffff; /* Light mode card background fallback */
  --card-text-fallback: black; /* Light mode card text fallback */
  --table-row-even-bg: rgb(236, 236, 236); /* Light mode table row even background */
  --status-row-bg-fallback: #ffffff; /* Light mode status row fallback background */
  --reset-link-color: #0000ff; /* Light mode reset link color */
  --error-header-text: tomato; /* Light mode error header text */
  --tooltip-bg: white; /* Light mode tooltip background */
  --tooltip-border: gray; /* Light mode tooltip border */
  --tooltip-text-fallback: black; /* Light mode tooltip text fallback */
  --teams-button-bg: #6264A7; /* Light mode Teams button background */
  --teams-button-border: #6264A7; /* Light mode Teams button border */
  --teams-button-text: #FFFFFF; /* Light mode Teams button text and icon */
  --content-bg: #fff; /* Light mode content background */
  --legend-bg-fallback: #ffffff; /* Light mode legend background fallback */
  --tech-content-bg: #fff; /* Light mode tech content background */
  --today-bg: #ffffff; /* Light mode today background */
  --today-text: #000000; /* Light mode today text */
  --off-range-bg: #f8f8f8; /* Light mode off-range background */
}

[data-theme="dark"] {
  --table-stripe-bg: #2a2a2a; /* Dark mode table stripe */
  --menu-divider-color: #5c5c5c; /* Dark mode menu divider */
  --menu-submenu-text: rgba(255, 255, 255, 0.85); /* Dark mode submenu text */
  --kanban-column-bg: #333333; /* Dark mode kanban column */
  --alert-color: #4da8ff; /* Dark mode alert */
  --completion-soon-color: #ff8c1a; /* Dark mode completion soon */
  --completion-past-color: #ff4d4f; /* Dark mode completion past */
  --job-line-manual-color: #ff6347; /* Dark mode job line manual */
  --muted-button-color: #666666; /* Dark mode muted button */
  --muted-button-hover-color: #999999; /* Dark mode muted button hover */
  --table-border-color: #5c5c5c; /* Dark mode table border */
  --table-hover-bg: #2a2a2a; /* Dark mode table hover */
  --popover-bg: #2a2a2a; /* Dark mode popover background */
  --error-text: #ff4d4f; /* Dark mode error message */
  --no-jobs-text: #999999; /* Dark mode no jobs message */
  --message-yours-bg: #2a2a2a; /* Dark mode yours message background */
  --message-mine-bg-start: #4da8ff; /* Dark mode mine message gradient start */
  --message-mine-bg-end: #326ade; /* Dark mode mine message gradient end */
  --message-mine-text: #ffffff; /* Dark mode mine message text */
  --message-mine-tail-bg: #1f1f1f; /* Dark mode mine/yours message tail */
  --system-message-bg: #333333; /* Dark mode system message background */
  --system-message-text: #cccccc; /* Dark mode system message text */
  --system-label-text: #999999; /* Dark mode system label/date text */
  --message-icon-color: #cccccc; /* Dark mode message icon */
  --eula-card-bg: #2a2a2a; /* Dark mode eula card background */
  --notification-bg: #2a2a2a; /* Dark mode notification background */
  --notification-text: rgba(255, 255, 255, 0.85); /* Dark mode notification text */
  --notification-border: #5c5c5c; /* Dark mode notification border */
  --notification-header-bg: #333333; /* Dark mode notification header background */
  --notification-header-border: #444444; /* Dark mode notification header border */
  --notification-header-text: rgba(255, 255, 255, 0.85); /* Dark mode notification header text */
  --notification-toggle-icon: #4da8ff; /* Dark mode notification toggle icon */
  --notification-switch-bg: #4da8ff; /* Dark mode notification switch background */
  --notification-btn-link: #4da8ff; /* Dark mode notification link button */
  --notification-btn-link-hover: #80c1ff; /* Dark mode notification link button hover */
  --notification-btn-link-disabled: rgba(255, 255, 255, 0.25); /* Dark mode notification link button disabled */
  --notification-btn-link-active: #2681ff; /* Dark mode notification link button active */
  --notification-read-bg: #2a2a2a; /* Dark mode notification read background */
  --notification-read-text: rgba(255, 255, 255, 0.65); /* Dark mode notification read text */
  --notification-unread-bg: #333333; /* Dark mode notification unread background */
  --notification-unread-text: rgba(255, 255, 255, 0.85); /* Dark mode notification unread text */
  --notification-item-hover-bg: #3a3a3a; /* Dark mode notification item hover background */
  --notification-ro-number: #4da8ff; /* Dark mode notification RO number */
  --notification-relative-time: rgba(255, 255, 255, 0.45); /* Dark mode notification relative time */
  --alert-bg: #3a1a1a; /* Dark mode alert background */
  --alert-text: rgba(255, 255, 255, 0.85); /* Dark mode alert text */
  --alert-border: #ff6666; /* Dark mode alert border */
  --alert-message: #ff6666; /* Dark mode alert message */
  --share-badge-bg: #666666; /* Dark mode share badge background */
  --column-header-bg: #333333; /* Dark mode column header background */
  --footer-bg: #333333; /* Dark mode footer background */
  --tech-icon-color: #ff4500; /* Dark mode tech icon color */
  --clone-border-color: #4da8ff; /* Dark mode clone border color */
  --event-arrived-bg: rgba(4, 141, 4, 0.6); /* Dark mode arrived event background */
  --event-block-bg: tomato; /* Dark mode block event background */
  --event-selected-bg: #4a5e6e; /* Dark mode selected event background */
  --task-bg: #2a2a2a; /* Dark mode task center background */
  --task-text: rgba(255, 255, 255, 0.85); /* Dark mode task text */
  --task-border: #5c5c5c; /* Dark mode task border */
  --task-header-bg: #333333; /* Dark mode task header background */
  --task-header-border: #444444; /* Dark mode task header border */
  --task-section-bg: #333333; /* Dark mode task section background */
  --task-section-border: #444444; /* Dark mode task section border */
  --task-row-hover-bg: #3a3a3a; /* Dark mode task row hover background */
  --task-row-border: #444444; /* Dark mode task row border */
  --task-ro-number: #4da8ff; /* Dark mode task RO number */
  --task-due-text: rgba(255, 255, 255, 0.45); /* Dark mode task due text */
  --task-button-bg: #4da8ff; /* Dark mode task button background */
  --task-button-hover-bg: #80c1ff; /* Dark mode task button hover background */
  --task-button-disabled-bg: #666666; /* Dark mode task button disabled background */
  --task-button-text: #ffffff; /* Dark mode task button text */
  --task-message-text: rgba(255, 255, 255, 0.45); /* Dark mode task message text */
  --mask-bg: rgba(255, 255, 255, 0.05); /* Dark mode mask background */
  --board-text-color: #cccccc; /* Dark mode board text color */
  --section-bg: #333333; /* Dark mode section background */
  --detail-text-color: #bbbbbb; /* Dark mode detail text color */
  --card-selected-bg: rgba(255, 255, 255, 0.1); /* Dark mode selected card background */
  --card-stripe-even-bg: #2a2a2a; /* Dark mode even card background */
  --card-stripe-odd-bg: #1f1f1f; /* Dark mode odd card background */
  --bar-border-color: #2a2a2a; /* Dark mode bar border and background */
  --tag-wrapper-bg: #2a2a2a; /* Dark mode tag wrapper background */
  --tag-wrapper-text: #cccccc; /* Dark mode tag wrapper text */
  --preview-bg: #2a2a2a; /* Dark mode preview background */
  --preview-border-color: #4da8ff; /* Dark mode preview border color */
  --event-bg-fallback: #262626; /* Dark mode event background fallback */
  --card-bg-fallback: #2a2a2a; /* Dark mode card background fallback */
  --card-text-fallback: #cccccc; /* Dark mode card text fallback */
  --table-row-even-bg: #2a2a2a; /* Dark mode table row even background */
  --status-row-bg-fallback: #1f1f1f; /* Dark mode status row fallback background */
  --reset-link-color: #4da8ff; /* Dark mode reset link color */
  --error-header-text: #ff6347; /* Dark mode error header text */
  --tooltip-bg: #2a2a2a; /* Dark mode tooltip background */
  --tooltip-border: #5c5c5c; /* Dark mode tooltip border */
  --tooltip-text-fallback: #cccccc; /* Dark mode tooltip text fallback */
  --teams-button-bg: #7b7dc4; /* Dark mode Teams button background */
  --teams-button-border: #7b7dc4; /* Dark mode Teams button border */
  --teams-button-text: #ffffff; /* Dark mode Teams button text and icon */
  --content-bg: #2a2a2a; /* Dark mode content background */
  --legend-bg-fallback: #2a2a2a; /* Dark mode legend background fallback */
  --tech-content-bg: #2a2a2a; /* Dark mode tech content background */
  --today-bg: #4a5e6e; /* Dark mode today background */
  --today-text: #ffffff; /* Dark mode today text */
  --off-range-bg: #333333; /* Dark mode off-range background */
  --svg-background: #FFF; /* Dark mode SVG background */
}

.ant-menu-item-divider {
  border-bottom: 1px solid var(--menu-divider-color) !important;
}

// Note: Monitor this in dark mode to ensure text visibility
.ant-menu-submenu-title {
  color: var(--menu-submenu-text) !important;
}

.imex-table-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  &__search {
    flex: 1;
  }
}

.imex-flex-row {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;

  &__grow {
    flex: 1;
  }

  &__margin {
    margin: 0.2rem 0.2rem;
  }

  &__margin-large {
    margin: 0.5rem 0.5rem;
  }

  &__flex-space-around {
    justify-content: space-around;
  }
}

.ellipses {
  display: inline-block;
  text-overflow: ellipsis;
  width: calc(95%);
  overflow: hidden;
  white-space: nowrap;
}

.tight-antd-rows {
  .ant-row {
    margin: 0rem;
    line-height: 1rem;
  }
}

// Scrollbar styles (uncomment if needed, updated for dark mode)
// ::-webkit-scrollbar-track {
//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
//   border-radius: 0.2rem;
//   background-color: var(--table-stripe-bg);
// }

// ::-webkit-scrollbar {
//   width: 0.25rem;
//   max-height: 0.25rem;
//   background-color: var(--table-stripe-bg);
// }

// ::-webkit-scrollbar-thumb {
//   border-radius: 0.2rem;
//   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
//   background-color: var(--alert-color);
// }

.ant-input-number-input,
.ant-input-number,
.ant-picker-input,
.ant-picker,
.ant-select {
  width: 100% !important;
}

.production-alert {
  animation: alertBlinker 1s linear infinite;
  color: var(--alert-color);
}

@keyframes alertBlinker {
  50% {
    color: var(--completion-past-color);
    opacity: 100;
  }
}

.blue {
  color: var(--alert-color);
}

.production-completion-soon {
  color: var(--completion-soon-color);
  font-weight: bold;
}

.production-completion-past {
  color: var(--completion-past-color);
  font-weight: bold;
}

.react-resizable {
  position: relative;
  background-clip: padding-box;
}

.react-resizable-handle {
  position: absolute;
  width: 10px;
  height: 100%;
  bottom: 0;
  right: -5px;
  cursor: col-resize;
  z-index: 1;
}

.production-list-min-height {
  min-height: 19px;
}

#noticeable-widget {
  iframe {
    z-index: 2 !important;
  }
}

.react-kanban-column {
  background-color: var(--kanban-column-bg) !important;
}

.production-list-table {
  td.ant-table-column-sort {
    background: unset;
  }
}

.ReactGridGallery_tile-icon-bar {
  div {
    svg {
      fill: var(--alert-color);
    }
  }
}

.job-line-manual {
  color: var(--job-line-manual-color);
  font-style: italic;
}

.ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
  background-color: var(--table-stripe-bg);
}

.rowWithColor > td {
  background-color: var(--bgColor) !important;
}

.muted-button {
  color: var(--muted-button-color);
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
}

.muted-button:hover {
  color: var(--muted-button-hover-color);
}

.notification-alert-unordered-list {
  cursor: pointer;
  padding: 0;
  margin: 0;

  .notification-alert-unordered-list-item {
    margin-right: 0;
  }
}

.content-container {
  padding: 1rem;
}

// Override react-big-calendar styles for dark mode only
[data-theme="dark"] {
  .car-svg {
    background-color: var(--svg-background);
  }

  .rbc-today {
    background-color: var(--today-bg);
    color: var(--today-text);
  }

  .rbc-off-range {
    background-color: var(--off-range-bg);
  }

  .rbc-day-bg.rbc-today {
    background-color: var(--today-bg);
  }
}

//.rbc-time-header-gutter {
//  padding: 0;
//}