:root { --sidebar-width: 250px; --primary-color: #3498db; --sidebar-bg: #2c3e50; }
* { box-sizing: border-box; }
body { background-color: #f4f6f9; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; margin: 0; padding: 0; overflow-x: hidden; }

/* Sidebar */
.sidebar { height: 100vh; width: var(--sidebar-width); position: fixed; top: 0; left: 0; background-color: var(--sidebar-bg); color: white; overflow-y: auto; z-index: 9999; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
.sidebar a { color: #bdc3c7; text-decoration: none; display: block; padding: 15px 20px; border-bottom: 1px solid #34495e; transition: all 0.2s; }
.sidebar a:hover, .sidebar a.active { background: #34495e; color: white; border-left: 5px solid var(--primary-color); padding-left: 25px; }
.sidebar .brand { padding: 20px; font-size: 1.2rem; font-weight: bold; border-bottom: 1px solid #4ecdc4; background: #1a252f; }

/* Main Content */
.main-content { margin-left: var(--sidebar-width); width: auto; padding: 30px; min-height: 100vh; position: relative; z-index: 1; }

/* Components */
.card { border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.05); margin-bottom: 25px; background: white; border-radius: 8px; }
.btn-primary { background-color: var(--primary-color); border: none; }
.btn-success { background-color: #27ae60; border: none; }
.status-badge { padding: 5px 10px; border-radius: 15px; font-size: 0.85rem; font-weight: 600; }
.badge-letter { background: #e8f8f5; color: #1abc9c; }
.badge-scan { background: #fef9e7; color: #f1c40f; }
.tag-pill { background: #eaf2f8; color: var(--primary-color); padding: 2px 8px; border-radius: 4px; margin-right: 5px; font-size: 0.8rem; }
.nav-tabs .nav-link { color: #495057; }
.nav-tabs .nav-link.active { font-weight: bold; color: var(--primary-color); }

/* List Group Item Flexbox for Buttons */
.list-group-item { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.list-group-item .content-area { flex: 1; margin-right: 15px; }
.list-group-item .action-area { flex-shrink: 0; }

@media (max-width: 768px) {
    :root { --sidebar-width: 60px; }
    .sidebar .brand, .sidebar a span { display: none; }
    .sidebar a { text-align: center; padding: 15px 0; }
    .sidebar a i { font-size: 1.4rem; margin: 0 !important; }
    .main-content { padding: 15px; }
}