body {
    display: flex;
    font-family: Arial, sans-serif;
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
.sidebar {
    width: 200px;
    background-color: #f0f0f0;
    padding: 15px; /* Slightly reduce padding */
    box-sizing: border-box;
    display: flex; /* Use flex for vertical alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    body {
        flex-direction: column; /* Stack sidebar and content vertically */
    }
    .sidebar {
        width: 100%; /* Full width on small screens */
        flex-direction: row; /* Arrange links horizontally */
        justify-content: space-around; /* Distribute links evenly */
        padding: 10px 0; /* Adjust padding for horizontal layout */
        border-bottom: 1px solid #eee; /* Separator */
    }
    .sidebar a {
        width: 48%; /* Allow two links per row */
        margin-bottom: 0; /* No bottom margin for horizontal links */
        font-size: 12px; /* Smaller font size */
        padding: 8px 5px; /* Smaller padding */
        flex-direction: column; /* Stack icon and text vertically */
    }
    .sidebar a i {
        margin-right: 0; /* No margin between icon and text when stacked */
        margin-bottom: 5px; /* Space between icon and text */
        font-size: 16px; /* Smaller icon size */
    }
    .sidebar a.icon-only {
        padding: 8px 0; /* Adjust padding for icon only */
        font-size: 16px; /* Smaller icon when alone */
    }
    .content {
        padding: 10px; /* Adjust content padding for small screens */
    }
    .app-list {
        /* No grid-template-columns needed for list view */
        gap: 10px; /* Smaller gap */
    }
    .app-item {
        /* min-height: 160px; Removed as it's a list now */
        padding: 10px 5px; /* Adjust padding */
    }
    .app-item h3 {
        font-size: 12px; /* Smaller app name */
    }
    .app-item p {
        font-size: 10px; /* Smaller version text */
    }
    .app-item button {
        font-size: 10px; /* Smaller buttons */
        padding: 4px 8px; /* Smaller button padding */
    }

    /* Specific adjustments for store-link and manage-link on small screens */
    #store-link, #manage-link {
        flex: 1; /* Allow them to take equal space */
        min-width: 0; /* Allow shrinking */
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden; /* Hide overflow */
        text-overflow: ellipsis; /* Show ellipsis for overflow */
    }
}
.sidebar a {
    display: flex; /* Use flex for icon + text alignment */
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Center content horizontally */
    padding: 12px 10px; /* Adjust padding */
    margin-bottom: 10px;
    background-color: #ddd;
    text-decoration: none;
    color: #333;
    border-radius: 5px;
    text-align: center;
    width: 100%; /* Make links take full sidebar width */
    box-sizing: border-box;
    font-size: 14px;
}
.sidebar a i {
    margin-right: 8px; /* Space between icon and text */
    font-size: 18px; /* Icon size */
}
.sidebar a.icon-only {
    justify-content: center; /* Center the icon */
    padding: 12px 0; /* Adjust padding for icon only */
    font-size: 24px; /* Larger icon when alone */
}
 .sidebar a.icon-only i {
     margin-right: 0; /* No margin needed when icon is alone */
 }
.sidebar a:hover {
    background-color: #ccc;
}
.sidebar a.active { /* Style for the active link */
     background-color: #007bff;
     color: white;
}
.content {
    flex-grow: 1;
    padding: 15px 20px; /* Adjust padding */
    overflow-y: auto;
    display: flex; /* Use flex for search bar + content */
    flex-direction: column;
}
#search-container {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
#app-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 14px;
}
.view-container { /* Wrapper for store/manage views */
     flex-grow: 1;
     overflow-y: auto; /* Allow view content to scroll */
}
.app-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Smaller gap between list items */
}
.app-item {
    border: 1px solid #ccc;
    padding: 10px 15px; /* Adjust padding for list item */
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 15px; /* Space between icon, name, and buttons */
    width: 100%; /* Take full width in list view */
    box-sizing: border-box;
}
.app-item .app-icon-container { /* Container for icon */
     height: 40px; /* Smaller fixed height for icon area */
     width: 40px; /* Fixed width for icon area */
     flex-shrink: 0; /* Prevent icon from shrinking */
     display: flex;
     align-items: center;
     justify-content: center;
}
.app-item .app-icon-container i { /* Style for the icon itself */
    font-size: 30px; /* Smaller icon size */
    color: #007bff; /* Default icon color */
}

.app-item .app-icon-container .app-svg-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.app-item h3 {
    font-size: 14px; /* App name size */
    margin: 0; /* Remove margin */
    word-break: break-word;
    flex-grow: 1; /* Allow name to take space */
    text-align: left; /* Align text to left */
}
.app-item p {
    font-size: 12px; /* Version text size */
    color: #666;
    margin: 0; /* Remove margin */
    flex-shrink: 0; /* Prevent version text from shrinking */
}
.app-item .app-buttons { /* Container for buttons */
     display: flex;
     gap: 5px; /* Space between buttons */
     flex-shrink: 0; /* Prevent buttons from shrinking */
     margin-left: auto; /* Push buttons to the right */
}
.app-item button {
    margin-top: 5px;
    padding: 6px 12px; /* Adjust button padding */
    cursor: pointer;
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #eee;
}
 .app-item button:hover {
     background-color: #ddd;
 }
 .app-item button.install-btn { background-color: #28a745; color: white; border-color: #28a745; }
 .app-item button.install-btn:hover { background-color: #218838; }
 .app-item button.install-btn:disabled { background-color: #6c757d; border-color: #6c757d; cursor: default; }
 .app-item button.uninstall-btn { background-color: #dc3545; color: white; border-color: #dc3545; }
 .app-item button.uninstall-btn:hover { background-color: #c82333; }
 .app-item button.shortcut-btn, .app-item button.launch-btn { background-color: #007bff; color: white; border-color: #007bff; margin-left: 5px; }
 .app-item button.shortcut-btn:hover, .app-item button.launch-btn:hover { background-color: #0056b3; }
.hidden { display: none !important; }
.app-item.hidden-by-search { display: none; } /* Class to hide items via search */