/* Highlight for fully populated connectors */
.connector-populated {
    border: 2.5px solid #34d399 !important; /* green border */
    box-shadow: 0 0 8px 0 #34d39944;
}
.connector-unpopulated {
    border: 2.5px solid #FF7F50 !important; /* accent border */
    box-shadow: 0 0 8px 0 #FF7F5044;
}
/* Ensure readable text on dark backgrounds */
.item-title, .detail-label, .detail-value, .empty-state, .modal-header h2, .section h2, .form-group label, .modal-content, .btn-save, .btn-cancel {
    color: #F3F4F6 !important;
}

.item-details, .detail-row {
    color: #D1D5DB !important;
}

a, .detail-value a {
    color: #FF7F50 !important;
    text-decoration: underline;
}

.empty-state p {
    color: #A0AEC0 !important;
}

input, select, textarea {
    color: #F3F4F6 !important;
    background: #23272F !important;
}
/* General backgrounds */
body {
    background: var(--background) !important;
    color: var(--text) !important;
}

.container, .main-content, .side-menu, .connector-type-editor, .modal-content, .item-card, .connector-type-list .item-card, .modal, .modal-header {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

header {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
    color: var(--text) !important;
}

/* Buttons */
.add-button, .header-btn, .btn-small, .btn-delete {
    background: var(--primary) !important;
    color: var(--text) !important;
    border: 1.5px solid var(--accent) !important;
    transition: background 0.2s, color 0.2s, border 0.2s;
}
.add-button:hover, .header-btn:hover, .btn-small:hover {
    background: var(--accent) !important;
    color: var(--background) !important;
    border-color: var(--primary) !important;
}
.btn-delete {
    background: var(--danger) !important;
    border-color: var(--danger-dark) !important;
}
.btn-delete:hover {
    background: var(--danger-dark) !important;
    color: var(--text) !important;
}

/* Forms */
input, select, textarea {
    background: #23272F !important;
    color: var(--text) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 5px;
    padding: 7px 10px;
    margin-bottom: 8px;
    font-size: 1em;
    transition: border 0.2s, background 0.2s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent) !important;
    background: #2D333B !important;
    outline: none;
}

label, .form-label {
    color: var(--muted) !important;
}

/* Modal overlay */
.modal {
    background: rgba(23, 107, 135, 0.85) !important;
}

/* Scrollbars */
::-webkit-scrollbar {
    width: 10px;
    background: var(--background);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}

/* Table and lists */
table, th, td {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

ul, ol {
    background: var(--card-bg) !important;
    color: var(--text) !important;
}

/* SVG and wire colors */
.wire-path {
    stroke: var(--accent) !important;
}
.contact-dot {
    fill: var(--primary) !important;
    stroke: var(--card-bg) !important;
}
.contact-dot.selected {
    fill: var(--accent) !important;
}
.wire-label {
    fill: var(--accent) !important;
    font-weight: 600;
}
/* New color palette for WireRun */
:root {
    --primary: #176B87;
    --primary-dark: #04364A;
    --accent: #FF7F50;
    --danger: #D7263D;
    --danger-dark: #8B1E2D;
    --background: #23272F;
    --card-bg: #2D333B;
    --border: #3A3F4B;
    --text: #F3F4F6;
    --muted: #A0AEC0;
}
/* Reduce margin for item-card */
/* Reduce margin for item-card */
/* Default item-card border */
.item-card {
    margin: 2px !important;
    border-color: var(--border) !important;
}

/* Wire warning: length > 200 or missing toConnector */
.item-card.wire-warning {
    border: 2.5px solid #e74c3c !important;
    box-shadow: 0 0 8px 0 #e74c3c44;
}
/* Highlight for fully populated connectors (must come after .item-card) */
.item-card.connector-populated {
    border: 2.5px solid #34d399 !important; /* green border */
    box-shadow: 0 0 8px 0 #34d39944;
}
.item-card.connector-unpopulated {
    border: 2.5px solid #FF7F50 !important; /* accent border */
    box-shadow: 0 0 8px 0 #FF7F5044;
}
/* Drastically reduce gap in item-details */
.item-details {
    margin: 0 !important;
    padding: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
}
/* Reduce font size and padding for detail-label and detail-value */
.detail-label, .detail-value {
    font-size: 0.92em !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Reduce spacing between detail rows */
.detail-row {
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
}
/* Reduce right margin and padding for wire display */
.wire-connections {
    margin-right: 0 !important;
    padding-right: 0 !important;
    display: block;
}
.connection-tag {
    margin-right: 0 !important;
    padding-right: 0 !important;
    display: block;
}
/* WireRun custom styles */
.tag-content small {
    white-space: pre;
}
div {
    margin: 0;
    padding: 0;
}

/* Flex layout for wire card header */
.wire-meta {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}
.wire-size, .wire-length {
    font-size: 0.98em;
    color: #A0AEC0;
}