/* ---------- Shared layout ---------- */
.csm-wrap .csm-columns { display: flex; gap: 24px; margin-top: 15px; }
.csm-col-side { width: 240px; flex-shrink: 0; }
.csm-col-main { flex: 1; background: #fff; padding: 20px; border: 1px solid #dcdcde; border-radius: 6px; }

.csm-list-nav { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid #dcdcde; border-radius: 6px; overflow: hidden; }
.csm-list-nav li a { display: block; padding: 10px 14px; text-decoration: none; color: #1d2327; border-bottom: 1px solid #f0f0f1; }
.csm-list-nav li:last-child a { border-bottom: none; }
.csm-list-nav li.active a { background: #2271b1; color: #fff; }
.csm-list-nav li a .csm-badge { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }

.csm-badge { background: #f0f0f1; color: #50575e; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 8px; }

.csm-task-table th, .csm-task-table td { padding: 10px; }
.csm-subtask-row td { color: #50575e; }

/* ---------- Dashboard cards ---------- */
.csm-cards { display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0; }
.csm-card { background: #fff; border: 1px solid #dcdcde; border-radius: 8px; padding: 20px; width: 280px; text-align: center; }
.csm-card-wide { width: 100%; max-width: 700px; text-align: left; }
.csm-big-stat { font-size: 36px; font-weight: 700; margin: 10px 0 0; color: #2271b1; }

.csm-tag { padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.csm-tag-done { background: #d7f5df; color: #1a7a34; }
.csm-tag-pending { background: #fbe3e3; color: #a3221f; }

.csm-comments-list { margin-bottom: 20px; }
.csm-comment { border-bottom: 1px solid #f0f0f1; padding: 10px 0; }
.csm-comment-date { color: #757575; font-size: 12px; margin-left: 8px; }

/* ---------- Frontend staff dashboard ---------- */
.csm-dashboard { max-width: 640px; margin: 0 auto; font-size: 16px; }
.csm-shift-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.csm-shift-tab { flex: 1; text-align: center; padding: 10px; border-radius: 6px; background: #f0f0f1; text-decoration: none; color: #1d2327; font-weight: 600; }
.csm-shift-tab.active { background: #2271b1; color: #fff; }
.csm-shift-tab.current:not(.active) { border: 2px solid #2271b1; }

.csm-assigned-note, .csm-no-list { padding: 10px; background: #f6f7f7; border-radius: 6px; }
.csm-list-picker { padding: 10px; background: #f6f7f7; border-radius: 6px; margin-bottom: 10px; }
.csm-list-picker select { padding: 6px; }

.csm-progress-bar-wrap { margin: 16px 0; }
.csm-progress-bar { background: #e2e4e7; border-radius: 20px; height: 16px; overflow: hidden; }
.csm-progress-fill { background: #2ea162; height: 100%; transition: width .3s ease; }
.csm-progress-label { display: block; margin-top: 6px; font-size: 13px; color: #50575e; }

.csm-task-checklist, .csm-subtask-checklist { list-style: none; margin: 0; padding: 0; }
.csm-task-group { margin: 14px 0 6px; }
.csm-subtask-checklist { margin: 6px 0 6px 20px; padding-left: 14px; border-left: 2px solid #e2e4e7; }

.csm-task-item { background: #fff; border: 1px solid #e2e4e7; border-radius: 8px; padding: 12px 14px; margin-bottom: 8px; transition: background .2s ease, opacity .2s ease; }
.csm-task-item label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.csm-task-item input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; }
.csm-task-item .csm-task-name { flex: 1; }
.csm-task-item .csm-task-time { color: #757575; font-size: 12px; }
.csm-task-item.done { background: #eefaf1; border-color: #b7e4c5; }
.csm-task-item.done .csm-task-name { text-decoration: line-through; color: #50575e; }
.csm-task-item.csm-saving { opacity: .6; }
.csm-sub { margin-bottom: 6px; }