/* Dark theme styles */
html[data-theme="dark"] {
  --primary: #264b5d;
  --primary-fg: #f7f7f7;

  --body-fg: #eeeeee;
  --body-bg: #121212;
  --body-quiet-color: #d0d0d0;
  --body-medium-color: #e0e0e0;
  --body-loud-color: #ffffff;

  --breadcrumbs-link-fg: #e0e0e0;
  --breadcrumbs-bg: var(--primary);

  --link-fg: #81d4fa;
  --link-hover-color: #4ac1f7;
  --link-selected-fg: #6f94c6;

  --hairline-color: #272727;
  --border-color: #353535;

  --error-fg: #e35f5f;
  --message-success-bg: #006b1b;
  --message-warning-bg: #583305;
  --message-error-bg: #570808;

  --darkened-bg: #212121;
  --selected-bg: #1b1b1b;
  --selected-row: #00363a;

  --close-button-bg: #333333;
  --close-button-hover-bg: #666666;

  color-scheme: dark;
}

/* Additional dark mode styles for dimension blocks */
html[data-theme="dark"] .dimension-block,
html[data-bs-theme="dark"] .dimension-block {
  background-color: #212121 !important;
  border-color: #444 !important;
  color: #eee !important;
}

html[data-theme="dark"] .dimension-block input,
html[data-theme="dark"] .dimension-block select,
html[data-theme="dark"] .dimension-block textarea,
html[data-bs-theme="dark"] .dimension-block input,
html[data-bs-theme="dark"] .dimension-block select,
html[data-bs-theme="dark"] .dimension-block textarea {
  background-color: #333 !important;
  color: #eee !important;
  border-color: #555 !important;
}

html[data-theme="dark"] .dimension-block h6,
html[data-theme="dark"] .dimension-block label,
html[data-bs-theme="dark"] .dimension-block h6,
html[data-bs-theme="dark"] .dimension-block label {
  color: #eee !important;
}

html[data-theme="dark"] .alert-primary,
html[data-bs-theme="dark"] .alert-primary {
  background-color: #0d3a58 !important;
  color: #eee !important;
  border-color: #1976d2 !important;
}

/* Theme toggle button styles */
.theme-toggle {
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  vertical-align: middle;
  margin-inline-start: 5px;
  margin-top: -1px;
}

.theme-toggle i {
  font-size: 1.2rem;
  display: none;
}

html[data-theme="auto"] .theme-toggle .theme-icon-when-auto,
html[data-theme="dark"] .theme-toggle .theme-icon-when-dark,
html[data-theme="light"] .theme-toggle .theme-icon-when-light {
  display: inline-block;
}

/* Dark theme overrides for specific components */
html[data-theme="dark"] .table {
  color: var(--body-fg);
  border-color: var(--border-color);
}

html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
  background-color: var(--darkened-bg);
}

html[data-theme="dark"] .card {
  background-color: var(--darkened-bg);
  border-color: var(--border-color);
}

html[data-theme="dark"] .card-header {
  background-color: var(--primary);
  border-bottom-color: var(--border-color);
}

html[data-theme="dark"] .btn-link {
  color: var(--link-fg);
}

html[data-theme="dark"] .btn-link:hover {
  color: var(--link-hover-color);
}

html[data-theme="dark"] .dropdown-menu {
  background-color: var(--darkened-bg);
  border-color: var(--border-color);
}

html[data-theme="dark"] .dropdown-item {
  color: var(--body-fg);
}

html[data-theme="dark"] .dropdown-item:hover {
  background-color: var(--selected-bg);
}

html[data-theme="dark"] .dropdown-divider {
  border-color: var(--border-color);
}

html[data-theme="dark"] .form-control {
  background-color: var(--darkened-bg);
  border-color: var(--border-color);
  color: var(--body-fg);
}

html[data-theme="dark"] .form-control:focus {
  background-color: var(--darkened-bg);
  border-color: var(--link-fg);
  color: var(--body-fg);
}

html[data-theme="dark"] .nav-link {
  color: var(--body-fg);
}

html[data-theme="dark"] .nav-link:hover {
  color: var(--link-hover-color);
}

html[data-theme="dark"] .breadcrumb {
  background-color: var(--darkened-bg);
}

html[data-theme="dark"] .breadcrumb-item.active {
  color: var(--body-quiet-color);
}

html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--body-quiet-color);
}

/* Dark theme for the left menu */
html[data-theme="dark"] #icon-nav {
  background: var(--darkened-bg);
  border-right-color: var(--border-color);
}

html[data-theme="dark"] .left-menu {
  background: var(--darkened-bg);
  border-right-color: var(--border-color);
}

html[data-theme="dark"] .top-nav {
  background: var(--darkened-bg);
  border-bottom-color: var(--border-color);
}

/* Dark theme for the chat modal */
html[data-theme="dark"] .chat-modal {
  background: var(--darkened-bg);
  border-color: var(--border-color);
}

html[data-theme="dark"] .chat-header {
  background: var(--primary);
}

html[data-theme="dark"] .chat-input {
  border-top-color: var(--border-color);
}

html[data-theme="dark"] .chat-input input {
  background-color: var(--darkened-bg);
  color: var(--body-fg);
  border-color: var(--border-color);
}

html[data-theme="dark"] .chat-input button {
  background: var(--primary);
  color: var(--primary-fg);
}

/* Custom CSS for Scaffold Site */

/* Instruction thumbnails */
.instruction-thumbnail {
    width: auto;
    max-height: 100px;
    object-fit: contain;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 2px;
    transition: transform 0.2s ease;
}

.instruction-thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Lightbox for instruction images */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    display: block;
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Critical rating badges */
.badge.bg-danger {
    font-weight: bold;
}

.badge.bg-warning {
    color: #212529;
}

/* Dimension blocks */
.dimension-block {
    background-color: #f8f9fa;
    transition: box-shadow 0.3s ease;
}

.dimension-block:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

html[data-theme="dark"] .dimension-block:hover,
html[data-bs-theme="dark"] .dimension-block:hover {
    box-shadow: 0 4px 8px rgba(255,255,255,0.1);
}

.dimension-block h6 {
    color: #2c3e50;
}

html[data-theme="dark"] .dimension-block h6,
html[data-bs-theme="dark"] .dimension-block h6 {
    color: #eee !important;
}

/* Table for instructions */
.table-bordered thead th {
    background-color: #f2f2f2;
}

/* Responsive adjustments for mobile view */
@media (max-width: 768px) {
    .instruction-thumbnail {
        max-height: 80px;
    }
    
    .dimension-block .row .col-md-3 {
        margin-bottom: 10px;
    }
}

/* Google Places Autocomplete (Search) - keep suggestions above Bootstrap modals */
.pac-container {
    z-index: 2000 !important;
}

/* ... existing code ... */

/* ------------------------------------------------------------
   Horizontal table scrolling + drag-to-scroll (mouse)
   ------------------------------------------------------------ */

.slam-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.slam-drag-scroll {
    cursor: grab;
}

.slam-drag-scroll.slam-dragging {
    cursor: grabbing;
}

.slam-drag-scroll.slam-dragging,
.slam-drag-scroll.slam-dragging * {
    user-select: none;
}