:root {
    --bg-color: #eef2f5;
    --panel-bg: #ffffff;
    --border-color: #d1d5db;
    --header-bg: #2c3e50;
    --accent-color: #3498db;
    --text-color: #333;
    --highlight: #e3f2fd;
}

body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: var(--bg-color); height: 100vh; display: flex; flex-direction: column; }

/* --- Dashboard --- */
.dashboard-container { max-width: 900px; margin: 50px auto; width: 100%; }
.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.module-card { background: white; padding: 30px; border-radius: 10px; text-align: center; text-decoration: none; color: #333; box-shadow: 0 4px 6px rgba(0,0,0,0.1); transition: transform 0.2s; }
.module-card:hover { transform: translateY(-5px); }
.module-card .icon { font-size: 40px; color: var(--accent-color); margin-bottom: 15px; }
.module-card.placeholder { opacity: 0.6; border: 2px dashed #ccc; cursor: default; }
.module-card.placeholder:hover { transform: none; }

/* --- Main App Layout --- */
.app-container { display: flex; flex: 1; height: calc(100vh - 50px); overflow: hidden; }

/* Top Navigation Bar */
.navbar { background: var(--header-bg); color: white; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.navbar a { color: white; text-decoration: none; }
.nav-right a { margin-left: 20px; font-size: 0.9em; }

/* LEFT PANE: 3 Category Columns */
.pane-left { width: 40%; display: flex; border-right: 1px solid var(--border-color); background: var(--panel-bg); }
.cat-column { flex: 1; display: flex; flex-direction: column; border-right: 1px solid var(--border-color); }
.cat-header { background: #f8f9fa; padding: 10px; font-weight: bold; border-bottom: 1px solid var(--border-color); text-align: center; font-size: 0.9rem; }
.cat-list { flex: 1; overflow-y: auto; list-style: none; padding: 0; margin: 0; }
.cat-list li a { display: block; padding: 8px 12px; font-size: 0.9rem; color: var(--text-color); text-decoration: none; border-bottom: 1px solid #f1f1f1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-list li a:hover { background-color: #f5f5f5; }
.cat-list li a.active { background-color: var(--accent-color); color: white; }

/* RIGHT PANE: Content */
.pane-right { width: 60%; display: flex; flex-direction: column; background: white; }

/* Breadcrumb & Toolbar */
.toolbar { padding: 10px 20px; border-bottom: 1px solid var(--border-color); background: #f8f9fa; }
.breadcrumb { font-size: 1.1rem; font-weight: 600; color: #555; margin-bottom: 10px; display: block; }
.controls { display: flex; gap: 10px; }
.search-input { flex: 1; padding: 6px; border: 1px solid var(--border-color); border-radius: 4px; }
.btn { padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.btn-primary { background: var(--accent-color); color: white; }
.btn-danger { background: #e74c3c; color: white; }
.btn-secondary { background: #95a5a6; color: white; }

/* Bookmark List (Table Style) */
.list-view { flex: 1; overflow-y: auto; padding: 0; }
.bm-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bm-table th { text-align: left; background: #f1f1f1; padding: 10px; font-size: 0.85rem; color: #666; position: sticky; top: 0; border-bottom: 1px solid #ddd; }
.bm-table td { padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-table tr:hover { background-color: var(--highlight); }
.bm-title { font-weight: 600; color: var(--accent-color); text-decoration: none; }
.bm-actions { opacity: 0; transition: opacity 0.2s; text-align: right; }
.bm-table tr:hover .bm-actions { opacity: 1; }

/* --- CSS Modal (Clean Popup) --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.modal-content { background-color: #fff; margin: 5% auto; padding: 0; border-radius: 8px; width: 500px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.modal-header h3 { margin: 0; color: #333; }
.close-btn { font-size: 24px; cursor: pointer; color: #aaa; }
.close-btn:hover { color: #333; }

.modal-body { padding: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.85rem; color: #666; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; font-family: inherit; }
.form-group textarea { height: 60px; resize: vertical; }

.cat-row { display: flex; gap: 10px; }
.cat-row div { flex: 1; }

.modal-footer { padding: 15px 20px; background: #f9f9f9; border-top: 1px solid #eee; text-align: right; border-radius: 0 0 8px 8px; }



/* --- Dashboard Sections --- */
.section-title { 
    margin-top: 40px; 
    margin-bottom: 15px; 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    color: #888; 
    border-bottom: 1px solid #e0e0e0; 
    padding-bottom: 5px;
}

/* Main App Grid (Big Cards) */
.module-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
    gap: 20px; 
}

/* Utility Grid (Small, Compact Rows) */
.utility-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 15px; 
}

.utility-card { 
    background: white; 
    padding: 15px; 
    border-radius: 6px; 
    text-decoration: none; 
    color: #444; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); 
    display: flex; 
    align-items: center; 
    transition: all 0.2s ease; 
    border: 1px solid transparent; 
}

.utility-card:hover { 
    background-color: #f9f9f9; 
    border-color: #ccc; 
    transform: translateY(-2px); 
    box-shadow: 0 4px 8px rgba(0,0,0,0.08); 
}

.utility-card .icon { 
    font-size: 1.2rem; 
    margin-right: 15px; 
    margin-bottom: 0; /* Override previous card style */
    color: #7f8c8d; 
    width: 30px; 
    text-align: center; 
}

.utility-card h4 { 
    margin: 0 0 2px 0; 
    font-size: 1rem; 
    color: #2c3e50; 
}

.utility-card p { 
    margin: 0; 
    font-size: 0.85rem; 
    color: #888;
}

/* --- Authentication Pages (Login/Register) --- */
.auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--bg-color);
}

.auth-card {
    background: white;
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    text-align: center;
}

.auth-header {
    margin-bottom: 30px;
}

.auth-header i {
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.auth-header h2 {
    margin: 0;
    color: var(--header-bg);
    font-weight: 600;
}

.auth-form .form-group {
    text-align: left;
    margin-bottom: 20px;
}

.auth-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.auth-form input:focus {
    border-color: var(--accent-color);
    outline: none;
}

.auth-btn {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s;
}

.auth-btn:hover {
    background-color: #2980b9;
}

.auth-links {
    margin-top: 20px;
    font-size: 0.9rem;
}

.auth-links a {
    color: #666;
    text-decoration: none;
    margin: 0 10px;
}

.auth-links a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Ensure alerts look good in auth context */
.alert {
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    text-align: left;
}
.alert.error { background: #fde8e8; color: #c0392b; border: 1px solid #fab1a0; }
.alert.success { background: #dff9fb; color: #27ae60; border: 1px solid #a3cb38; }

/* NAVBAR STYLES */
.navbar {
    background: #2c3e50;
    color: white;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand { font-size: 1.2rem; font-weight: bold; margin-right: 30px; white-space: nowrap; }

.nav-links { display: flex; gap: 5px; flex: 1; overflow-x: auto; }

.nav-item {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.nav-item:hover { background: rgba(255,255,255,0.1); color: white; }
.nav-item.active { background: var(--accent-color); color: white; font-weight: bold; }
.nav-item.logout:hover { background: #c0392b; }

.nav-right { display: flex; gap: 10px; }

/* Responsive: Hide text labels on small screens */
@media (max-width: 900px) {
    .nav-text { display: none; }
    .nav-item { padding: 8px 15px; font-size: 1.1rem; }
}