/* styles.css */

/* Sync status bar layout */
.ow-sync-status {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Sync status bar spinner */
.ow-sync-status .ow-spin,
.ow-ribbon.ow-spin {
    display: inline-flex;
    animation: ow-spin 1.5s linear infinite;
}
@keyframes ow-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

 

.text-field::after, .number-field::after, .link-field::after, .multi-link-field::after  {
    content: attr(data-tooltip);
    visibility: hidden;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 300px;
    font-size: 0.75em;
}

.text-field:hover::after, .number-field:hover::after, .link-field:hover::after, .multi-link-field:hover::after {
    visibility: visible;
}

.text-field {
    color: whitesmoke;
    pointer-events: none; 
}

.number-field {
    font-style: italic;
    color: whitesmoke; 
}

.link-field {
    color: whitesmoke; 
    border-bottom: 1px dotted rgb(114, 180, 208);

}
.multi-link-field {
    color: ghostwhite;
    text-decoration: none;
    border-bottom: 1px dotted rgb(27, 102, 232); 
}

.custom-link {
    color: var(--text-link);
    text-decoration: underline;
    cursor: pointer;
}

.custom-link:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}
.node-character {
    fill: blue; /* SVG fill color for character nodes */
}

.node-location {
    fill: green; /* SVG fill color for location nodes */
}

.node-event {
    fill: red; /* SVG fill color for event nodes */
}
/* Styles for WorldPasteModal textarea */
.world-paste-textarea {
    width: 100%;
    min-height: 200px;
    border: 1px solid grey;
    padding: 10px;
    margin-bottom: 10px; /* Spacing between textarea and button */
}

/* Specific styles for valid and invalid input */
.world-paste-textarea.valid {
    border-color: lightgreen;
}

.world-paste-textarea.invalid {
    border-color: salmon;
}

/* Styles for the submit button in WorldPasteModal */
.world-paste-submit-button {
    width: 100%;
    padding: 10px;
    background-color: var(--interactive-normal);
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s, opacity 0.3s;
}

.world-paste-submit-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.world-paste-submit-button:not(.disabled):hover {
    background-color: var(--interactive-hover);
    cursor: pointer;
}
/* Styles specific to the WorldRenameModal */
.rename-modal-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rename-dropdown {
    width: 100%;
}

.rename-input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
}

.rename-button {
    width: 100%;
    padding: 10px;
    background-color: var(--interactive-normal);
    color: white;
    border: none;
    border-radius: 5px;
    opacity: 0.5; /* Start as disabled */
    cursor: not-allowed;
}

.rename-button:not(.disabled) {
    opacity: 1.0;
    cursor: pointer;
}

.rename-button:not(.disabled):hover {
    background-color: var(--interactive-hover);
}
.key-selection-modal {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.key-selection-dropdown {
    width: 100%;
}

.key-selection-input {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid var(--background-modifier-border);
}

.key-selection-submit-button {
    width: 100%;
    padding: 10px;
    background-color: var(--interactive-normal);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.key-selection-submit-button:hover {
    background-color: var(--interactive-hover);
}