/* Apply the Raleway font to the entire application */
body {
    background-color: #121826;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    padding: 0;
    color: #FFFFFF; /* Default text color */
}





/* Tab Navigation */
.tab-container {
    display: flex;
    /* background-color: #1E2533; */
    height: 30px;
}

.tab-button {
    position: relative; /* To position count badges absolutely within the button */
    flex: 1;
    padding: 12px 12px; 
    /* background-color: inherit; */
    /* color: #868484; */
    border: none;
    /* cursor: pointer; */
    text-align: left;
    font-size: 12px;
    /* transition: background-color 0.3s; */
    font-family: 'Raleway', sans-serif;
}


/* .tab-button:hover {
    background-color: #2A3243;
} */

/* .tab-button.active {
    background-color: #2A3243;
    color: #a09f9f;
} */

/* Tab Count Styling */
.tab-count, .selected-count {
    font-size: 12px;
    margin-left: 5px;
    font-weight: normal;
    font-family: sans-serif;
}

.selected-count {
    border-color: #1da83e; /* Green border for active tiles */
    background-color: rgba(0, 255, 0, 0.1); /* Light green background */
    border: 1px solid #1da83e; /* Green border */
    color: #FFFFFF; /* White text */
    border-radius: 50%;
    padding: 2px 6px;
    margin-left: 4px;
    display: none; /* Hidden by default, shown when count > 0 */
}

/* Tab Content */
.tab-content {
    display: none;
    padding: 10px;
}

.tab-content.active {
    display: block;
}

/* Filters Container */
.filters-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Add Button */
.add-button {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 24px;
    cursor: pointer;
    /* background-color: transparent; */
    color: #a3a1a1;
    border: none;
    /* transition: background-color 0.3s; */
    margin-right: 5px; /* Space between buttons */
}

.add-button:hover {
    color: #ffffff;
}

/* All Active Button */
.all-active-button {
    /* background-color: #2A3243; */
    border: none;
    /* color: #FFFFFF; */
    padding: 5px 10px;
    margin-right: 10px;
    font-size: 10px;
    cursor: pointer;
    border-radius: 0em;
    transition: background-color 0.3s;
    border: 1px solid #2A3243;
}

.all-active-button.active {
    /* background-color: rgba(0, 255, 0, 0.1); Light green background */
    border: 1px solid #1da83e; /* Green border */
}



/* Tag Filter Bar */
.tag-filter-bar {
    flex-grow: 1; /* Take up remaining space */
    overflow-x: auto; /* Allow horizontal scrolling */
}

.tag-list {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Horizontal scroll */
    -webkit-overflow-scrolling: touch;
}

.tag-list::-webkit-scrollbar {
    height: 6px;
}

.tag-list::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 3px;
}

.tag-list::-webkit-scrollbar-track {
    background-color: #1E2533;
}

/* Tag Styles */
.tag {
    background-color: #2A3243;
    border-radius: 2em;
    padding: 5px 10px;
    font-size: 10px;
    color: #969393;
    margin: 0 5px 0 0; /* Adjust margins */
    cursor: default;
    /* display: flex; */
    align-items: center;
}

.tag.active {
    background-color: #00A3FF;
}

.tag .remove-tag {
    background: none;
    border: none;
    color: inherit;
    margin-left: 5px;
    cursor: pointer;
}

/* Tile Container */
.tile-container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 20px;
}

/* Tile Styling */
.tile {
    width: 198px;
    height: 180px;
    margin: 0%;
    padding: 20px;
    background-color: transparent;
    border: 1px solid #5A5A5A;
    border-radius: 8px;
    box-sizing: border-box;
    text-align: left;
    position: relative;
    /* color: #FFFFFF; */
    transition: border-color 0.3s;
    cursor: move; /* Indicate that the tile can be dragged */
}

.tile:hover {
    border-color: #c3c2c2;
}

.tile.active-tile {
    border-color: #1da83e; /* Green border for active tiles */
    /* background-color: rgba(0, 255, 0, 0.1); Light green background */
}

.tile.invalid-url {
    border: 2px solid red; /* Red border for invalid URL */
    background-color: rgba(255, 0, 0, 0.1); /* Light red background to indicate error */
}

.tile .tile-content {
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 10px;
    margin-right: 24px; /* Add space to avoid overlap with delete button */
}

/* Tag Input */
.tile .tag-input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #8f8e8e;
    /* color: #FFFFFF; */
    padding: 5px;
    font-size: 12px;
    margin: 2px;
    min-width: 20px;
    max-width: 90%;
}

.tile .tag-input::placeholder {
    color: #888;
}

.tile .tag-input:focus {
    outline: none;
    border-bottom-color: #00A3FF;
}

/* Tag Suggestion List */
.tag-suggestions {
    position: absolute;
    background-color: #1E2533;
    border: 0px;
    border-radius: 4px;
    margin-top: 5px;
    max-height: 100px;
    overflow-y: auto;
    z-index: 1000;
    width: calc(100% - 40px);
}

.tag-suggestion {
    padding: 5px 10px;
    cursor: pointer;
    font-size: 10px;
    /* color: #FFFFFF; */
}

.tag-suggestion:hover,
.tag-suggestion.selected {
    background-color: #2A3243;
}

/* Delete Button */
.delete-button {
    position: absolute;
    top: 2px;
    right: 8px;
    background: none;
    border: none;
    color: #bdbcbc;
    font-size: 16px;
    display: none; /* Hidden by default, shown on hover */
    cursor: pointer;
}

.tile:hover .delete-button {
    display: block;
}

/* URL Input for Website Tiles */
.tile .url-input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #8f8e8e;
    /* color: #FFFFFF; */
    font-size: 12px;
    width: 142px;
    padding: 5px;
}

.tile .url-input:focus {
    outline: none;
    border-bottom-color: #00A3FF;
}

.tile .url-error {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

/* Dragging Visual Feedback */
.tile.dragging {
    opacity: 0.5;
}

.tile.drag-over {
    border: 2px dashed #00A3FF;
}

/* Responsive Design */
@media screen and (max-width: 600px) {
    .tile {
        width: 100%;
    }
}