/* Basic Reset and Typography */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7f9;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* --- Global Navigation Bar --- */
#global-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #343a40;
    padding: 10px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#global-nav .nav-links a {
    color: #adb5bd;
    text-decoration: none;
    padding: 8px 15px;
    margin-right: 10px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

#global-nav .nav-links a:hover {
    background-color: #495057;
    color: white;
}

/* Actions Menu styling (for buttons) */
#actions-menu button {
    padding: 8px 15px;
    margin-left: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#actions-menu button:hover {
    background-color: #218838;
}

/* --- MAIN LAYOUT: Sidebar + Content --- */
#main-container {
    max-width: 1600px; /* Increased max width */
    margin: 20px auto;
    padding: 0 20px;
    display: flex;
    gap: 20px;
}

/* --- Tag Filter Sidebar (Option 2) --- */
#tag-filter-sidebar {
    flex-shrink: 0;
    width: 250px; 
    background-color: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    max-height: 80vh;
    overflow-y: auto;
}

#tag-filter-sidebar h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.sidebar-action-btn {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.tag-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin-bottom: 4px;
    background-color: #f8f9fa;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    font-size: 0.9em;
}

.tag-list-item:hover {
    background-color: #e2e6ea;
}

.tag-list-item.active-filter {
    background-color: #007bff;
    color: white;
    font-weight: bold;
}
.tag-list-item.active-filter:hover {
    background-color: #0056b3;
}

.tag-count {
    background-color: #ced4da;
    color: #495057;
    padding: 1px 6px;
    border-radius: 8px;
}
.tag-list-item.active-filter .tag-count {
    background-color: white;
    color: #007bff;
}

/* --- Dashboard Panel --- */
#bookmark-dashboard-panel {
    flex-grow: 1;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    min-height: 80vh;
}

/* Controls and Filters */
#controls-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

#filter-container {
    display: flex;
    gap: 10px;
    flex-grow: 1;
}

.control-input, .control-select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#universal-search-input { 
    width: 500px;
}

#actions-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

#add-new-bookmark-btn, .bulk-action-btn {
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.bulk-action-btn.danger-btn {
    background-color: #dc3545;
}
.bulk-action-btn.danger-btn:hover {
    background-color: #c82333;
}

/* Drag Drop Area */
.drop-zone {
    border: 2px dashed #007bff;
    background-color: #f0f8ff;
    padding: 8px 15px;
    text-align: center;
    border-radius: 4px;
    width: 100px; 
    cursor: pointer;
    transition: background-color 0.2s;
}
.drop-zone p { margin: 0; font-size: 0.9em; color: #007bff;}
.drop-zone:hover { background-color: #dbeaff; }


/* --- Table Styling (Compact List View - Option 1) --- */

#bookmark-table-wrapper {
    overflow-y: auto;
    max-height: calc(80vh - 200px);
    margin-bottom: 15px;
}

#bookmark-table {
    width: 100%;
    border-collapse: collapse;
}

#bookmark-table thead th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 8px 10px; 
}

/* Column Widths */
.compact-title-col { width: 55%; }
.compact-labels-col { width: 40%; }
.compact-action-col { width: 5%; }

/* Compact Row Styling */
#bookmark-table td {
    padding: 5px 10px; /* HEAVILY REDUCED ROW PADDING */
    border-bottom: 1px solid #f0f0f0; 
}

#bookmark-table tbody tr:hover {
    background-color: #f0f8ff;
}

/* Sortable Header Styling */
#bookmark-table th.sortable {
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}
#bookmark-table th.sortable:hover {
    background-color: #e2e6ea;
}
#bookmark-table th.sortable.sorted-asc,
#bookmark-table th.sortable.sorted-desc {
    background-color: #cfe2ff; 
}
#bookmark-table th.sortable.sorted-asc::after {
    content: ' ?'; 
}
#bookmark-table th.sortable.sorted-desc::after {
    content: ' ?'; 
}

/* Title & Domain Display */
.title-cell a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 500;
}
.bookmark-domain {
    display: block;
    font-size: 0.75em;
    color: #6c757d;
}

/* Inline Editable Fields */
.editable-field {
    cursor: pointer;
    min-width: 100px;
    display: inline-block; 
}

.edit-input {
    border: 1px solid #007bff;
    padding: 2px; 
    width: 90%;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 1em;
}


/* Label Styling */
.label-container {
    display: flex;
    flex-wrap: wrap;
    gap: 3px; 
    align-items: center;
}

.label-tag {
    display: inline-flex;
    align-items: center;
    background-color: #e9ecef;
    color: #495057;
    padding: 2px 6px; 
    border-radius: 10px;
    font-size: 0.7em; 
    cursor: default;
}

.remove-label {
    margin-left: 4px;
    font-weight: bold;
    cursor: pointer;
    color: #dc3545;
    line-height: 1;
}

.label-input {
    border: 1px solid #ced4da;
    padding: 1px 3px;
    border-radius: 3px;
    width: 80px;
    font-size: 0.8em;
}

/* Action Cell: Icon only on hover */
.action-icon {
    visibility: hidden;
    color: #dc3545;
    cursor: pointer;
    font-size: 1.1em;
    padding: 3px;
    background: none;
    border: none;
    line-height: 1;
}
#bookmark-table tbody tr:hover .action-icon {
    visibility: visible;
}

/* Trash Can */
#trash-can {
    border: 2px dashed #dc3545;
    background-color: #f8d7da;
    color: #721c24;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    transition: background-color 0.3s, border-color 0.3s;
    margin-top: 15px;
}

#trash-can.drag-over {
    background-color: #dc3545;
    color: white;
    border-color: white;
}