:root {
	--bg-color: #f8fafc;
	--card-bg: #ffffff;
	--text-color: #1e293b;
	--border-color: #e2e8f0;
	--empty-color: #f1f5f9;
	--primary: #3b82f6;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { background-color: var(--bg-color); color: var(--text-color); padding: 2rem; }
.container { max-width: 1600px; margin: 0 auto; }

header {
	display: flex; flex-direction: column; gap: 1.5rem;
	margin-bottom: 2rem; background: var(--card-bg); padding: 1.5rem;
	border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.header-top { display: flex; justify-content: space-between; align-items: center; }
.header-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border-color); padding-top: 1rem; }

.week-controls { display: flex; align-items: center; gap: 0.5rem; }
.header-actions { display: flex; gap: 0.5rem; }

button {
	padding: 0.5rem 1rem; border: 1px solid var(--border-color);
	background: var(--card-bg); border-radius: 6px; cursor: pointer;
	font-weight: 500; transition: all 0.2s;
}
button:hover { background: #f1f5f9; }
.primary-btn { background: var(--primary); color: white; border: none; }
.primary-btn:hover { background: #2563eb; }
.week-title { font-size: 1.1rem; font-weight: 600; min-width: 180px; text-align: center; }

/* Grid Layout */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1rem; }
.day-column {
	background: var(--card-bg); border-radius: 12px; padding: 1rem;
	border: 1px solid var(--border-color); display: flex; flex-direction: column;
	gap: 0.75rem; min-height: 500px;
}
.day-header { font-weight: 600; text-align: center; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border-color); margin-bottom: 0.5rem; }

/* Block Elements */
.block-slot {
	position: relative; padding: 1rem; border-radius: 8px; min-height: 90px;
	cursor: pointer; display: flex; flex-direction: column; justify-content: center;
	align-items: center; text-align: center; font-weight: 500; font-size: 0.9rem;
	transition: transform 0.15s, box-shadow 0.15s; border: 2px dashed var(--border-color);
	background-color: var(--empty-color); color: #64748b;
}
.block-slot.assigned { border: none; color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.block-slot.inherited { border: 2px dashed rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2); }
.block-slot:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,0.08); }
.block-category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; opacity: 0.85; }
.add-block-btn { margin-top: auto; width: 100%; border: 1px dashed var(--border-color); color: #64748b; padding: 0.5rem; }

/* Progress Components */
.progress-container { width: 100%; background-color: rgba(255, 255, 255, 0.3); border-radius: 9999px; height: 6px; margin-top: 0.5rem; overflow: hidden; }
.block-slot:not(.assigned) .progress-container { background-color: var(--border-color); }
.progress-fill { height: 100%; background-color: #ffffff; width: 0%; transition: width 0.3s ease; }
.resource-card .progress-container { background-color: #e2e8f0; height: 8px; margin-top: 0.75rem; }
.resource-card .progress-fill { background-color: #10b981; }
.progress-text { font-size: 0.75rem; opacity: 0.9; margin-top: 0.25rem; }

/* Modals and Forms */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); justify-content: center; align-items: center; z-index: 1000; }
.modal-content { background: var(--card-bg); padding: 2rem; border-radius: 16px; width: 90%; max-width: 650px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }

.menu-category-section { margin-bottom: 1.5rem; }
.menu-category-title { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-color); }
.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
.menu-item { padding: 0.75rem; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; text-align: left; background: white; }
.menu-item:hover { filter: brightness(0.95); }

textarea, input, select { width: 100%; padding: 0.6rem; border: 1px solid var(--border-color); border-radius: 6px; margin-top: 0.25rem; font-size: 0.95rem; }
label { font-size: 0.85rem; font-weight: 600; color: #475569; display: block; margin-top: 1rem; }

.resource-card { background: #f8fafc; border: 1px solid var(--border-color); padding: 1rem; border-radius: 8px; margin-top: 1rem; position: relative; }
.resource-header { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 0.5rem; }
.resource-meta { font-size: 0.85rem; color: #64748b; margin-bottom: 0.5rem; }
.resource-meta a { color: var(--primary); text-decoration: none; }
.progress-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.progress-row input { width: 80px; margin-top: 0; text-align: center; }

.btn-group { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.danger-btn { background: #ef4444; color: white; border: none; }
.danger-btn:hover { background: #dc2626; }
.remove-res-btn { position: absolute; top: 1rem; right: 1rem; color: #ef4444; border: none; background: transparent; cursor: pointer; }

/* Database Admin Panel Configs */
.admin-category-card { border: 1px solid var(--border-color); padding: 1rem; border-radius: 8px; margin-bottom: 1rem; background: #f8fafc; }
.admin-topic-tag { display: inline-flex; align-items: center; gap: 0.5rem; background: white; border: 1px solid var(--border-color); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.85rem; margin: 0.25rem; }
.admin-topic-tag button { padding: 0 0.25rem; border: none; background: transparent; color: #ef4444; }