/* Global Reset and Body Styling */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Enable scrolling on mobile */
@media (max-width: 768px) {
  html,
  body {
    overflow: auto; /* Allow scrolling on mobile */
    height: auto; /* Allow natural height on mobile */
  }
}

/* Header */
#header {
  width: 100%;
  height: 60px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
#header h3 {
  margin: 0;
  flex-grow: 1;
}
#header a {
  color: #fff;
  text-decoration: none;
  margin-left: 15px;
}

/* Add these to your /css/styles.css file */

/* Header menu styling */
#headerMenu {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000; /* Above overlay image and other content */
  background-color: transparent;
}
#headerMenu .navbar-nav {
  display: flex;
  align-items: center;
}
#headerMenu .nav-link {
  background-color: transparent; /* Transparent background */
  color: #000000; /* Black text */
  border-radius: 4px;
  padding: 8px 15px; /* Consistent padding */
  margin: 0 5px; /* Consistent margin */
  font-size: 1rem; /* Fixed font size */
  line-height: 1.5; /* Fixed line height for consistent height */
  box-sizing: border-box; /* Ensure padding doesn't increase size */
  transition: color 0.2s; /* Smooth text color transition */
}
#headerMenu .nav-link:hover {
  background-color: transparent; /* Keep transparent on hover */
  color: #ff0000; /* New red text on hover */
}
#headerMenu .dropdown-toggle {
  background-color: transparent; /* Transparent background */
  color: #000000; /* Black text */
}
#headerMenu .dropdown-toggle:hover {
  background-color: transparent; /* Keep transparent on hover */
  color: #ff0000; /* New red text on hover */
}
#headerMenu .dropdown-menu {
  background-color: #ffffff; /* White background for visibility */
  border: 1px solid #dee2e6; /* Subtle border */
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Shadow for depth */
  display: none; /* Hidden by default */
  position: absolute; /* Ensure proper positioning */
  padding: 0.5rem 0;
}
#headerMenu .dropdown-item {
  background-color: transparent; /* Transparent background */
  color: #000000; /* Black text */
  padding: 8px 15px; /* Match .nav-link padding */
  margin: 0; /* Remove margin for clean alignment */
  font-size: 1rem; /* Match .nav-link font size */
  line-height: 1.5; /* Match .nav-link line height */
  box-sizing: border-box; /* Ensure padding doesn't increase size */
  transition: color 0.2s, background-color 0.2s; /* Smooth transitions */
}
#headerMenu .dropdown-item:hover {
  background-color: #f8f9fa; /* Light gray on hover */
  color: #ff0000; /* New red text on hover */
}
#headerMenu .dropdown-item.active {
  background-color: #f8f9fa; /* Light gray when active */
  color: #ff0000; /* New red text when active */
}
/* Ensure readability against images */
/* This specific selector might need adjustment depending on your final structure */
.index-right + #headerMenu .nav-link,
.index-right + #headerMenu .dropdown-toggle,
.index-right + #headerMenu .dropdown-item {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Show dropdown on hover for desktop */
@media (min-width: 992px) {
  #headerMenu .dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown on hover */
  }
  #headerMenu .dropdown-menu {
    margin-top: 0; /* Remove gap between toggle and menu */
  }
}
/* Mobile view adjustments */
@media (max-width: 991px) {
  #headerMenu {
    top: 5px;
    right: 5px;
    width: auto;
  }
  #headerMenu .navbar-nav {
    background-color: transparent; /* Or a solid color if desired for mobile */
    padding: 10px;
  }
  #headerMenu .nav-link {
    margin: 5px 0;
    font-size: 0.9rem; /* Slightly smaller font for mobile */
    padding: 8px 15px; /* Keep padding consistent */
    line-height: 1.5; /* Keep line height consistent */
  }
  #headerMenu .dropdown-item {
    font-size: 0.9rem; /* Match .nav-link font size in mobile */
    padding: 8px 15px; /* Keep padding consistent */
    margin: 0 5px; /* Keep margin consistent */
    line-height: 1.5; /* Keep line height consistent */
  }
  #headerMenu .navbar-toggler {
    border-color: #ff0000; /* New red for mobile toggle border */
  }
  #headerMenu .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23FD0519' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); /* New red for mobile toggle icon */
  }
}
/* -------------------------------
   INDEX / FORM & IMAGE Layout
   ------------------------------- */
.index-container {
  display: flex;
  width: 100%;
  height: 100vh;
}
.index-left {
  width: 40%;
  min-height: 100vh; /* Changed from height to min-height */
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start; /* Changed from center to flex-start */
  justify-content: center;
  position: relative;
  overflow-y: auto; /* Ensure scrolling is enabled */
  overflow-x: hidden; /* Prevent horizontal scroll */
}
.index-right {
  width: 60%;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* Ensure right side stays full height */
  position: sticky; /* Make the right side sticky */
  top: 0;
}
.index-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.form-container {
  width: 100%;
  max-width: 400px;
  padding: 40px 0; /* Add vertical padding to ensure content isn't cut off */
  margin: auto 0; /* Center vertically if there's extra space */
}
.left-logo {
  text-align: center;
  margin-bottom: 20px;
}
.left-logo img {
  max-width: 150px;
}
.form-title {
  font-size: 1.2rem;
  text-align: center;
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 20px;
}
.btn-red {
  background-color: red !important;
  border-color: red !important;
  color: #fff !important;
}
.create-account-link {
  color: red;
  text-decoration: none;
}
.create-account-link:hover {
  text-decoration: underline;
}
.short-input {
  width: 80px;
}
.text-danger {
  color: red !important;
  text-decoration: none;
}
.text-danger:hover {
  text-decoration: underline;
}
.navbar-nav .nav-item.active .nav-link {
  font-weight: bold;
  border-bottom: 2px solid red;
}

/* --------------------------------
   COMMON 3D CONFIGURATOR & Viewer
   -------------------------------- */
#mainContent {
  display: flex;
  height: 100vh;
  overflow: hidden;
}
/* (For pages that use a left panel + viewer layout) */
#viewer {
  position: relative;
  overflow: hidden;
}

/* Model & Instrument Buttons */
#modelButtons,
#instrumentButtons,
#accessoryButtons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
}
.model-btn {
  border: none;
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  /* Also used on some pages with extra padding */
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  /* Smooth transition for hover effect */
  transition: box-shadow 0.15s ease-in-out;
}

/* Hover effect: red inset border (no layout shift) */
.model-btn:hover {
  box-shadow: inset 0 0 0 3px #ff0000;
}

/* Instrument Filters */
#instrumentFilterSection,
#tableFilterSection,
#accessoryFilterSection {
  margin-bottom: 5px;
  padding: 5px;
  background: #eee;
  border-radius: 4px;
}

/* Filter group spacing */
#tableFilterSection p,
#instrumentFilterSection p,
#accessoryFilterSection p {
  margin-bottom: 0.25rem;
}

#tableFilterSection p + div,
#instrumentFilterSection p + div,
#accessoryFilterSection p + div {
  margin-bottom: 0.5rem; /* mt-2 equivalent */
}

/* Filter label capitalization */
#sizeCheckboxes .form-check-label,
#typeCheckboxes .form-check-label,
#categoryCheckboxes .form-check-label,
#companyCheckboxes .form-check-label,
#accessoryTypeCheckboxes .form-check-label {
  text-transform: capitalize;
}

#categoryCheckboxes,
#companyCheckboxes {
  max-height: 100px;
  overflow-y: auto;
  margin-bottom: 5px;
}
#categoryCheckboxes::-webkit-scrollbar,
#companyCheckboxes::-webkit-scrollbar {
  display: none;
}

/* -----------------------------------------
   Page‐Specific Overrides (Use body classes)
   ----------------------------------------- */

/* --- CONFIGURATOR & PREMADE CONFIG PAGES ---
   (Use by adding class="configurator" or "premade-config" to <body>) */
.configurator #leftPanel,
.premade-config #leftPanel {
  width: 25%;
  height: 100%; /* Ensure full height */
  background-color: #f8f9fa;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  position: relative; /* So absolute elements inside position correctly */
}
.configurator #viewer,
.premade-config #viewer {
  width: 75%;
  height: 100%; /* Ensure the viewer fills its container */
  background-color: #ffffff;
}
.configurator #configNameDisplay,
.premade-config #configNameDisplay {
  text-align: center;
  font-size: 1.1rem;
  margin: 0;
  font-weight: bold;
}

/* Configurator & Premade-Config Tabs Styling */
.configurator .nav-tabs.nav-fill,
.premade-config .nav-tabs.nav-fill {
  margin: 0 0 10px 0;
  border-bottom: 1px solid #ddd;
}

.configurator .nav-tabs.nav-fill .nav-item,
.premade-config .nav-tabs.nav-fill .nav-item {
  flex: 1;
  text-align: center;
}

.configurator .nav-tabs.nav-fill .nav-link,
.premade-config .nav-tabs.nav-fill .nav-link {
  padding: 8px 0;
  font-size: 0.9rem;
  color: #333;
  border: none;
  border-bottom: 3px solid transparent;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.configurator .nav-tabs.nav-fill .nav-link.active,
.premade-config .nav-tabs.nav-fill .nav-link.active {
  color: #ff0000;
  border-bottom-color: #ff0000;
  background: none;
}

.configurator .nav-tabs.nav-fill .nav-link:hover,
.premade-config .nav-tabs.nav-fill .nav-link:hover {
  color: #ff0000;
}

.configurator .nav-tabs.nav-fill .nav-link img,
.premade-config .nav-tabs.nav-fill .nav-link img {
  height: 24px;
  width: auto;
}

@media (max-width: 768px) {
  /* Hide left panel and overlay on mobile for both configurator and premade-config pages */
  .configurator #leftPanel,
  .configurator #overlayImage,
  .configurator #popoutMenu,
  .premade-config #leftPanel,
  .premade-config #overlayImage {
    display: none !important;
  }

  /* Make the viewer fill the screen on mobile for both configurator and premade-config pages */
  .configurator #viewer,
  .premade-config #viewer {
    width: 100%;
    height: 100vh;
  }

  /* New: Position the toggle outlines button at bottom left */
  .toggle-outlines-mobile {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 1000;
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
  }
}

/* --- ADMIN PAGE ---
   (Add class="admin" to <body>) */

/* Admin Page Styling */
.admin #mainContent {
  display: flex;
  height: calc(100% - 60px); /* header height */
}

.admin #savedConfigPanel,
.admin #viewer {
  width: 50%;
  padding: 20px;
  box-sizing: border-box;
}

/* Updated: Enable vertical scrolling for saved configurations */
.admin #savedConfigPanel {
  overflow-y: scroll;
  scrollbar-width: none;
}

/* Right panel scrolls, but scrollbar is hidden */
.admin #viewer {
  overflow-y: scroll;
  scrollbar-width: none; /* Firefox */
}
.admin #viewer::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

/* --------------------
   Responsive Adjustments
   -------------------- */
@media (max-width: 768px) {
  .admin #mainContent {
    flex-direction: column;
    height: auto;
  }
  .admin #savedConfigPanel,
  .admin #viewer {
    width: 100%;
    padding: 15px;
    overflow-y: visible;
  }
  /* Optional: add spacing between panels on mobile */
  .admin #viewer {
    margin-top: 20px;
  }
  /* Adjust table font and padding for smaller screens */
  .admin #modelsTable th,
  .admin #modelsTable td {
    padding: 8px;
    font-size: 0.9rem;
  }
}
@media (max-width: 768px) {
  .admin #modelsTableMobile {
    width: 100%;
    table-layout: fixed; /* forces columns to adjust their widths */
    font-size: 0.8rem;
  }
  .admin #modelsTableMobile th,
  .admin #modelsTableMobile td {
    padding: 4px 6px;
    word-wrap: break-word; /* allow long text to wrap */
  }
  .admin #modelsTableMobile img {
    max-width: 100%;
    height: auto;
  }
  .admin .filter-input {
    font-size: 0.8rem;
    padding: 4px;
  }
}

/* Left Panel: Flex container for user cards */
.admin #usersContainer {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.admin .user-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease;
  margin-bottom: 15px;
}
.admin .user-card:hover {
  transform: scale(1.02);
}
.admin .user-header {
  background: #007bff;
  color: #fff;
  padding: 12px 15px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}
.admin .user-details {
  padding: 12px 15px;
  background: #f8f9fa;
  display: none;
}
/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  .admin .user-header {
    padding: 10px 12px;
    font-size: 1rem;
  }
  .admin .user-details {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}
/* Configuration Card Styling */
.admin .configuration {
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  background: #fff;
  padding: 12px;
  margin-bottom: 10px;
}
.admin .configuration h5 {
  margin-top: 0;
  font-weight: bold;
  color: #343a40;
}
.admin .configuration p {
  font-size: 0.95rem;
  color: #6c757d;
}
.admin .configuration-details {
  font-size: 0.9rem;
  color: #495057;
  margin: 0;
  padding-left: 1rem;
}
.admin .configuration-details li {
  list-style-type: disc;
  margin-bottom: 5px;
}

/* Models Table Styling */
.admin #modelsTable {
  width: 100%;
  border-collapse: collapse;
}
.admin #modelsTable th,
.admin #modelsTable td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}
.admin #modelsTable th {
  background-color: #f7f7f7;
  font-weight: bold;
}

/* Filter row styling in header */
.admin .filter-input {
  width: 100%;
  padding: 6px;
  margin: 2px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Style preview images to fill their cell */
.admin #modelsTable td img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

/* Editable price span styling */
.admin #modelsTable td span {
  padding: 4px 8px;
  background-color: #e9ecef;
  border-radius: 4px;
}

/* --- CONFIGURE TABLES PAGE ---
   (Add class="configure-tables" to <body>) */
/* Configure Tables Page Styling */
.configure-tables #mainContent {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.configure-tables #leftPanel,
.configure-tables #rightPanel {
  width: 25%;
  background-color: #f8f9fa;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}

.configure-tables #viewer {
  width: 50%;
  background-color: #ffffff;
  position: relative;
}

.configure-tables .model-btn {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
  border: none;
  cursor: pointer;
}

/* Level tabs styling */
.configure-tables .nav-tabs .nav-link {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Level form elements */
.configure-tables .level-form .form-group {
  margin-bottom: 0.5rem;
}
.configure-tables .level-form label {
  font-size: 0.85rem;
}
.configure-tables .level-form input {
  font-size: 0.85rem;
}

/* Button styling */
.configure-tables #addLevelBtn,
.configure-tables #deleteLevelBtn {
  width: 48%;
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 10px;
}
.configure-tables #deleteLevelBtn {
  float: right;
}

#addLevelBtn,
#deleteLevelBtn {
  width: 48%;
  font-size: 1.5rem;
  line-height: 1;
  margin-top: 10px;
}
#deleteLevelBtn {
  float: right;
}

/* --- DASHBOARD PAGES ---
   (Add class="dashboard" to <body>) */
.dashboard .index-container {
  display: flex;
  height: 100vh;
}
.dashboard .index-left {
  width: 40%;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}
.dashboard .index-right {
  width: 60%;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dashboard .index-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard .project-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.dashboard .project-item {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.dashboard .project-header {
  background: #ff0000;
  color: #fff;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dashboard .project-dropdown {
  display: none;
  background: #f8f9fa;
  padding: 10px;
  justify-content: center;
  gap: 10px;
}
.dashboard .project-dropdown .btn {
  font-size: 0.9em;
}
.dashboard .project-dropdown .btn + .btn {
  margin-left: 10px;
}

/* Form Title Styling */
.dashboard .form-title {
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
  .dashboard .index-container {
    flex-direction: column;
    min-height: 100vh; /* Ensure container covers the viewport */
  }

  .dashboard .index-left,
  .dashboard .index-right {
    width: 100%;
    padding: 15px;
  }

  .dashboard .index-left {
    text-align: center;
  }

  .dashboard .left-logo img {
    max-width: 80%;
    height: auto;
    margin: 0 auto 15px;
  }

  .dashboard .form-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .dashboard .index-right {
    margin-top: auto;
  }

  .dashboard .index-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .dashboard .project-header {
    padding: 10px;
    font-size: 1rem;
  }
  .dashboard .project-dropdown {
    padding: 10px;
    font-size: 0.9rem;
  }

  #rightPanel {
    display: none !important;
  }

  /* Extra safety: if AR mode class is applied, ensure right panel stays hidden */
  body.ar-active #rightPanel {
    display: none !important;
  }
}

/* Utility */
.hide {
  display: none !important;
}

.fixed-buttons {
  position: fixed;
  bottom: 30px;
  left: 40px;
}

#overlayImage {
  position: fixed;
  bottom: 30px;
  right: 40px;
  z-index: 999;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

/* Responsive styling for the Welcome page */
@media (max-width: 768px) {
  .index-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh; /* Ensure minimum height */
    overflow: visible; /* Allow container to grow with content */
  }
  .index-left {
    width: 100%;
    min-height: auto; /* Reset min-height for mobile */
    height: auto; /* Allow natural height */
    padding: 15px;
    text-align: center;
    overflow-y: visible; /* Allow natural scrolling on mobile */
    overflow-x: hidden; /* Prevent horizontal scroll */
  }
  .index-left .left-logo img {
    max-width: 80%;
    height: auto;
    margin: 0 auto 15px;
  }
  .form-container {
    padding: 20px 0; /* Reduce padding on mobile */
  }
  .form-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
  .welcome-buttons a {
    font-size: 1rem;
    margin-bottom: 10px;
  }
  .index-right {
    width: 100%;
    padding: 0;
    position: relative; /* Reset position on mobile */
    height: 50vh; /* Give it a specific height on mobile */
    min-height: 300px; /* Minimum height for the image */
  }
  .index-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Additional responsive adjustments for very small screens */
@media (max-width: 576px) {
  .index-left {
    padding: 10px;
  }
  .form-container {
    max-width: 100%;
    padding: 15px 0;
  }
  .left-logo img {
    max-width: 120px;
  }
  .form-title {
    font-size: 1.2rem;
    white-space: normal; /* Allow wrapping on very small screens */
  }
  .form-group {
    margin-bottom: 0.75rem; /* Reduce spacing between form fields */
  }
  .btn-red {
    padding: 10px;
    font-size: 0.95rem;
  }
  .small.text-muted {
    font-size: 0.8rem; /* Make disclaimer text smaller */
  }
}

@media (max-width: 768px) {
  .toggle-ar-mobile {
    position: fixed;
    left: 20px;
    bottom: 80px;
    z-index: 1000;
    background: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 1rem;
  }
}

/* =========================
   Modern Admin Models Page
   ========================= */

/* Container for admin models page content */
.admin #desktopMainContent,
.admin #mobileMainContent {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  /* margin: 20px; */
  overflow: hidden;
  padding: 20px;
}

/* Modern Table Styling */
.admin #modelsTable,
.admin #modelsTableMobile {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.admin #modelsTable th,
.admin #modelsTable td,
.admin #modelsTableMobile th,
.admin #modelsTableMobile td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f1f1;
  text-align: left;
}

.admin #modelsTable th,
.admin #modelsTableMobile th {
  background-color: #f8f8f8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin #modelsTable tr:last-child td,
.admin #modelsTableMobile tr:last-child td {
  border-bottom: none;
}

/* Filter Row Styling */
.admin table thead tr:nth-child(2) {
  background-color: #fafafa;
}

.admin .filter-input,
.admin select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
  background: #fafafa;
  transition: border 0.3s ease;
}

.admin select:focus,
.admin .filter-input:focus {
  outline: none;
  border-color: #007bff;
}

/* Editable element hover effect */
.admin td span {
  transition: background 0.3s ease;
}

.admin td span:hover {
  background: #f0f0f0;
  border-radius: 4px;
  cursor: pointer;
}

/* Row hover effect */
.admin #modelsTable tbody tr:hover,
.admin #modelsTableMobile tbody tr:hover {
  background-color: #f9f9f9;
}

/* Responsive adjustments for mobile in admin models page */
@media (max-width: 768px) {
  .admin #modelsTableMobile {
    font-size: 0.85rem;
  }
}

/* Utility for small numeric inputs */
.small-input {
  width: 60px;
}

/* Make entire table cell clickable */
.admin table tbody tr td {
  cursor: pointer;
}

/* =========================================
   Model Loading Modal
   ========================================= */
.loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-modal.hidden {
  display: none;
}

.loading-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.loading-modal-content {
  position: relative;
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  min-width: 250px;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff0000;
  border-radius: 50%;
  animation: loadingSpin 0.8s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes loadingSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-modal-content .loading-text {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 1rem;
}

.loading-modal-content.error .loading-text {
  color: #ff0000;
}

.loading-modal-content.error .loading-spinner {
  display: none;
}

#loading-modal-close.hidden {
  display: none;
}

/* Palette Loading Indicator */
.palette-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #666;
  width: 100%;
  min-height: 150px;
  grid-column: 1 / -1; /* Span all grid columns */
  text-align: center;
}

.palette-loading .loading-text {
  margin-top: 12px;
  font-size: 14px;
}

/* Action Buttons Redesign (Story 2.7) */
.action-buttons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
}

.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  flex: 1;
}

.action-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.action-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.action-label {
  font-size: 0.75rem;
  color: #495057;
}

/* Responsive - Icon only on small screens */
@media (max-width: 350px) {
  .action-label {
    display: none;
  }
  .action-btn {
    padding: 8px;
  }
}

/* Tooltip styles for action buttons */
.action-btn[title] {
  position: relative;
}

.action-btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: #333;
  color: #fff;
  font-size: 0.7rem;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
  margin-bottom: 4px;
}