/* Details Panel General Styles */
.details-panel {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #1d1d1d;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}

/* Sidebar (Left Vertical Menu) */
.properties-sidebar {
  flex: 0 0 34px; /* Increased width */
  min-width: 34px; /* Prevent squashing */
  background-color: #181818;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1d1d1d;
}

.tab-icon {
  width: 34px; /* Increased size */
  height: 34px;
  background: none; /* Transparent background */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  padding: 0;
  border-left: 2px solid transparent; /* Placeholder for active border */
}

.tab-icon:hover {
  opacity: 0.8;
  background-color: #3e3e3e;
}

.tab-icon.active {
  opacity: 1;
  background-color: #2b2b2b; /* Match content bg or slightly lighter */
  border-left: 2px solid #4772b3; /* Highlight */
}

.tab-icon img {
  width: 22px; /* Increased icon size */
  height: 22px;
  /* If icons are black SVGs, invert them to white. If they are already white, remove filter.
     Assuming they need to be white on dark bg. */
}

/* Main Content Area */
.properties-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #2b2b2b;
}

.properties-header {
  padding: 8px 10px;
  background-color: #2b2b2b;
  font-size: 13px;
  font-weight: bold;
  color: #ccc;
  border-bottom: 1px solid #1d1d1d;
}

.properties-content {
  flex: 1;
  overflow-y: auto;
  padding: 5px 0;
}

/* General Settings List & Options */
.project-settings-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.setting-option {
  display: flex;
  align-items: center;
  padding: 4px 10px;
  margin-bottom: 2px;
}

.setting-option .label {
  min-width: 120px;
  color: #ccc;
  font-size: 12px;
}

.setting-group {
  margin-bottom: 5px;
}

.group-header {
  padding: 4px 8px;
  background-color: #3e3e3e;
  cursor: pointer;
  font-size: 13px;
  color: #ddd;
  border-radius: 3px;
  display: flex;
  align-items: center;
  user-select: none;
  margin: 0 5px;
}

.group-header:hover {
  background-color: #4a4a4a;
}

.group-header .arrow {
  font-size: 10px;
  margin-right: 6px;
  transition: transform 0.1s;
  display: inline-block;
  width: 10px;
}

.group-header.collapsed .arrow {
  transform: rotate(-90deg);
}

.group-content {
  padding: 5px 0;
  display: block;
}

.group-header.collapsed + .group-content {
  display: none;
}

/* --- Modifier Panel Styles --- */

.modifier-panel {
    background-color: #2b2b2b;
    margin-bottom: 2px;
    border-radius: 3px;
    border: 1px solid transparent; 
    overflow: hidden;
}

.modifier-panel.active {
    border: 1px solid #4772b3; 
}

.modifier-header {
    display: flex;
    align-items: center;
    padding: 5px 8px;
    background-color: #303030;
    cursor: pointer;
    color: #ccc;
    height: 24px;
}

.modifier-header:hover {
    background-color: #383838;
}

.modifier-header .arrow {
    font-size: 10px;
    margin-right: 8px;
    width: 12px;
    text-align: center;
    color: #aaa;
    transition: transform 0.1s;
}

.modifier-header.collapsed .arrow {
    transform: rotate(-90deg);
}

.modifier-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    opacity: 0.8;
}

.modifier-name-input {
    flex: 1;
    background-color: #181818;
    border: 1px solid #3e3e3e;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 10px;
    min-width: 0;
}

.modifier-name-input:focus {
    border-color: #4772b3;
    outline: none;
}

.modifier-header-icons {
    display: flex;
    gap: 2px;
    margin-right: 8px;
}

.header-icon-btn {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    border-radius: 3px;
    font-size: 12px;
}

.header-icon-btn:hover {
    color: #fff;
    background-color: #444;
}

.header-icon-btn.active {
    color: #4772b3; 
}

.remove-btn:hover {
    color: #ff5555;
}

.header-drag-handle {
    color: #555;
    cursor: grab;
    margin-left: 5px;
    letter-spacing: -1px;
    font-size: 14px;
}

.modifier-content {
    padding: 8px 10px;
    background-color: #232323;
}

.modifier-header.collapsed + .modifier-content {
    display: none;
}

.control-row {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    justify-content: space-between;
}

.control-label {
    color: #ccc;
    min-width: 100px;
}

.control-input {
    background-color: #181818;
    border: 1px solid #3e3e3e;
    color: #eee;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.control-input:focus {
    border-color: #4772b3;
    outline: none;
}

/* Text Inputs (Name, etc.) */
.text-input {
    box-sizing: border-box;
    flex: 1; /* Flexible width */
    min-width: 0; /* Allow shrinking */
    background-color: #181818;
    border: 1px solid #3e3e3e;
    color: #eee;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 4px;
}

.text-input:focus {
    border-color: #4772b3;
    outline: none;
    background-color: #252525;
}

.control-input.number,
.number-input,
.number {
    box-sizing: border-box;
    width: 60px !important;
    flex: 0 0 60px;
    max-width: 60px;
    text-align: right;
    background-color: #181818;
    border: 1px solid #3e3e3e;
    color: #eee;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 12px;
    margin-left: 4px;
}

.control-input.number:focus,
.number-input:focus,
.number:focus {
    border-color: #4772b3;
    outline: none;
    background-color: #252525;
}

.control-input.select {
    flex: 1;
    max-width: 200px;
}

.sub-panel-header {
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    color: #ddd;
}

.sub-panel-header .arrow {
    font-size: 10px;
    margin-right: 5px;
    width: auto;
    transition: transform 0.1s;
}

.sub-panel-content {
    padding-left: 15px;
    border-left: 1px solid #333;
    margin-left: 5px;
}

.action-button {
    background-color: #333;
    color: #ccc;
    border: 1px solid #181818;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    text-align: center;
}
.action-button:hover {
    background-color: #444;
    color: #fff;
}

/* Dropdown */
.modifier-dropdown {
    position: absolute;
    background-color: #2b2b2b;
    border: 1px solid #181818;
    z-index: 9999;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 150px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.modifier-dropdown-item {
    padding: 6px 12px;
    cursor: pointer;
    color: #ddd;
    font-size: 13px;
}

.modifier-dropdown-item:hover {
    background-color: #4772b3;
    color: #fff;
}

/* --- Material Panel Styles --- */

.material-slots-container {
    border: 1px solid #181818;
    background-color: #232323;
    border-radius: 3px;
    margin: 5px 10px;
    height: 100px; /* Fixed height for slots list */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.material-slot {
    padding: 3px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: #ccc;
    font-size: 13px;
    border-bottom: 1px solid #282828;
}

.material-slot:hover {
    background-color: #2a2a2a;
}

.material-slot.active {
    background-color: #4772b3;
    color: white;
}

.slot-icon {
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: #aa8800;
    display: inline-block;
}

.slot-controls {
    display: flex;
    justify-content: flex-end;
    margin: 0 10px 10px 10px;
    gap: 1px;
}

.slot-btn {
    background-color: #2b2b2b;
    border: 1px solid #181818;
    color: #ccc;
    width: 24px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.slot-btn:hover {
    background-color: #3a3a3a;
    color: white;
}

.slot-btn:first-child {
    border-radius: 3px 0 0 3px;
}
.slot-btn:last-child {
    border-radius: 0 3px 3px 0;
}

.material-actions {
    display: flex;
    justify-content: space-between;
    margin: 0 10px 10px 10px;
    gap: 5px;
}

.action-btn {
    flex: 1;
    background-color: #2b2b2b;
    border: 1px solid #181818;
    color: #ccc;
    padding: 4px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    text-align: center;
}

.action-btn:hover {
    background-color: #3a3a3a;
    color: white;
}

.material-selector-row {
    display: flex;
    align-items: center;
    margin: 5px 10px 10px 10px;
    gap: 5px;
}

.material-name-input {
    flex: 1;
    background-color: #1d1d1d;
    border: 1px solid #3e3e3e;
    color: #fff;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 13px;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #ccc;
    font-size: 14px;
    padding: 0 4px;
}
.icon-btn:hover { color: #fff; }

.center-text {
  margin-top: 20px;
  text-align: center;
  color: #888;
}

.uuid-input {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; 
  padding: 5px;
}

.color-input {
  width: 3em;
  height: 1.5em;
  border: none;
  background: none;
  padding: 0;
  vertical-align: middle;
}