/* components.css - 卡片、按鈕、Modal、Toast、表格 */

/* Cards */
.card{background:#fff;border-radius:var(--radius);border:1px solid var(--gray-200);overflow:hidden}
.card-header{padding:16px 20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.card-header h2{font-size:18px;font-weight:600;color:var(--gray-800)}
.card-body{padding:20px}

/* Stats Grid */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.dash-year-label{grid-column:1/-1;font-size:12px;color:var(--gray-400);text-align:right;margin-bottom:-8px}
.stat-card{background:#fff;border-radius:var(--radius);padding:20px;border:1px solid var(--gray-200);transition:.2s}
.stat-card:hover{box-shadow:var(--shadow-md)}
.stat-label{font-size:14px;color:var(--gray-500);margin-bottom:4px}
.stat-value{font-size:34px;font-weight:700;color:var(--gray-900)}
.stat-value.success{color:var(--success)}
.stat-value.danger{color:var(--danger)}
.stat-value.primary{color:var(--primary)}
.stat-sub{font-size:12px;color:var(--gray-400);margin-top:2px}

/* Class Selector */
.class-selector{margin-bottom:12px}
.class-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:0}
.class-tab{padding:7px 16px;border-radius:20px;border:1px solid var(--gray-200);background:#fff;font-size:14px;cursor:pointer;transition:.15s;color:var(--gray-600);white-space:nowrap}
.class-tab:hover{border-color:var(--primary);color:var(--primary)}
.class-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.class-dropdown{padding:8px 32px 8px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:14px;background:#fff;color:var(--gray-700);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer;min-width:160px;max-width:260px}
.checkin-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.checkin-toolbar #checkinTempleFilter{padding:8px 28px 8px 10px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:14px;background:#fff;color:var(--gray-600);flex-shrink:0;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer}
.checkin-toolbar-actions{display:flex;gap:6px;margin-left:auto}
.checkin-toolbar-actions .btn-label{display:inline}
.checkin-summary-row{margin-bottom:8px}

/* Search */
.search-box{position:relative;margin-bottom:16px}
.search-box input{width:100%;padding:10px 14px 10px 40px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:15px;background:#fff;transition:.15s;color:var(--gray-700)}
.search-box input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.search-box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--gray-400)}

/* Student List */
.student-list{display:flex;flex-direction:column;gap:2px}
.student-row{display:flex;align-items:center;padding:10px 16px;border-radius:var(--radius-sm);transition:.1s;cursor:pointer;gap:12px}
.student-row:hover{background:var(--gray-50)}
.student-row.checked-in{background:var(--success-light)}
.student-row.absent{background:var(--danger-light)}
.student-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}
.student-avatar.male{background:#dbeafe;color:#2563eb}
.student-avatar.female{background:#fce7f3;color:#db2777}
.student-info{flex:1;min-width:0}
.student-name{font-size:16px;font-weight:500;color:var(--gray-800)}
.student-meta{font-size:13px;color:var(--gray-400)}
.student-status{display:flex;align-items:center;gap:8px;flex-shrink:0}
.check-btn{padding:6px 16px;border-radius:20px;border:none;font-size:13px;font-weight:500;cursor:pointer;transition:.15s}
.check-btn.checkin{background:var(--primary);color:#fff}
.check-btn.checkin:hover{background:var(--primary-dark)}
.check-btn.undo{background:var(--gray-200);color:var(--gray-600)}
.check-btn.leave{background:var(--warning);color:#fff;font-size:12px;padding:4px 10px}
.status-tag{padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500}
.status-tag.present{background:var(--success-light);color:#059669}
.status-tag.absent{background:var(--danger-light);color:#dc2626}
.status-tag.leave{background:var(--warning-light);color:#d97706}

/* QR Scanner */
.qr-section{text-align:center;display:flex;flex-direction:column;gap:16px}
.scan-desc{color:var(--gray-500);font-size:14px}
.scan-class-wrap{max-width:400px;margin:0 auto;width:100%}
.scan-toggle-btn{align-self:center;padding:10px 32px;font-size:15px}
#qr-reader{width:100%;max-width:400px;margin:0 auto;border-radius:var(--radius);overflow:hidden}
#qr-reader video{border-radius:var(--radius)}
.qr-result{padding:16px;border-radius:var(--radius-sm);font-size:15px;font-weight:500}
.qr-result.success{background:var(--success-light);color:#059669}
.qr-result.error{background:var(--danger-light);color:#dc2626}
.qr-actions{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.scan-manual-toggle{text-align:center;margin-bottom:4px}
.scan-expand-btn{font-size:13px;color:var(--gray-400);background:none;border:none;cursor:pointer;padding:4px 8px}
.scan-expand-btn:hover{color:var(--primary)}
.scan-log-card{margin-top:16px}
.scan-picker-overlay{background:#f8fafc;border:2px solid var(--primary);border-radius:var(--radius);padding:16px;margin-top:12px;text-align:center}
.scan-picker-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);border:none;font-size:15px;font-weight:500;cursor:pointer;transition:.15s;white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#059669}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-outline{background:#fff;color:var(--gray-600);border:1px solid var(--gray-200)}
.btn-outline:hover{background:var(--gray-50);border-color:var(--gray-300)}
.btn-sm{padding:8px 12px;font-size:13px;min-height:36px}
.btn-lg{padding:12px 24px;font-size:15px}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:200;padding:16px;opacity:0;pointer-events:none;transition:.2s}
.modal-overlay.show{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:var(--radius-lg);width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:16px;font-weight:600}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--gray-100);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--gray-500);transition:.15s}
.modal-close:hover{background:var(--gray-200)}
.modal-body{padding:20px}
.modal-footer{padding:16px 20px;border-top:1px solid var(--gray-100);display:flex;justify-content:flex-end;gap:8px}

/* Batch checkin list */
.batch-list{max-height:300px;overflow-y:auto}
.batch-item{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid var(--gray-100);gap:8px}
.batch-item:last-child{border-bottom:none}
.batch-item input[type=checkbox]{width:18px;height:18px;accent-color:var(--primary)}

/* Toast */
.toast-container{position:fixed;top:70px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius-sm);color:#fff;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);animation:slideIn .3s;display:flex;align-items:center;gap:8px;min-width:200px}
.toast.success{background:var(--success)}
.toast.error{background:var(--danger)}
.toast.info{background:var(--primary)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* Empty state */
.empty-state{text-align:center;padding:40px 20px;color:var(--gray-400)}
.empty-state svg{width:48px;height:48px;margin-bottom:12px;opacity:.5}
.empty-state p{font-size:14px}

/* Tab content */
.tab-content{display:none}
.tab-content.active{display:block}

/* Notification Panel */
.notify-list{display:flex;flex-direction:column;gap:8px}
.notify-item{display:flex;align-items:center;padding:12px 16px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);gap:12px;background:#fff}
.notify-item .contact-info{flex:1}
.notify-item .contact-name{font-weight:600;font-size:14px}
.notify-item .contact-detail{font-size:12px;color:var(--gray-500)}
.notify-actions{display:flex;gap:6px}

/* QR Code Display */
.qr-display{text-align:center;padding:20px}
.qr-display canvas{border:8px solid #fff;box-shadow:var(--shadow-md);border-radius:var(--radius-sm)}
.qr-student-name{font-size:18px;font-weight:600;margin-top:12px}

/* Cross-class badge */
.cross-class-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500;background:#e0e7ff;color:#4338ca;margin-left:4px}
.qr-result.cross-class{background:#e0e7ff;color:#4338ca}

/* Cross-class search modal */
.cross-search-results{max-height:300px;overflow-y:auto}
.cross-search-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:.1s}
.cross-search-item:hover{background:var(--primary-light)}

/* Tag Chips (Lecturer tags) */
.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--primary-light);color:var(--primary-dark);border-radius:16px;font-size:13px;font-weight:500;white-space:nowrap}
.tag-chip .remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:none;background:rgba(0,0,0,.1);color:var(--primary-dark);cursor:pointer;font-size:14px;line-height:1;padding:0;transition:.15s}
.tag-chip .remove:hover{background:rgba(0,0,0,.2)}

/* Topic dots (per-topic attendance indicators) */
.topic-dots{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.topic-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.topic-dot.present{background:var(--success)}
.topic-dot.absent{background:var(--gray-300)}

/* Topic checkin row (expanded per-topic checkboxes) */
.topic-checkin-row{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 8px 64px;background:var(--gray-50);border-bottom:1px solid var(--gray-100)}
.topic-check-label{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--gray-600);cursor:pointer;padding:4px 8px;border-radius:6px;transition:.1s}
.topic-check-label:hover{background:var(--primary-light)}
.topic-check-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary)}

/* Topic button in checkin */
.check-btn.topic-btn{background:var(--gray-100);color:var(--gray-600);font-size:11px;padding:4px 8px;border-radius:12px}
.check-btn.topic-btn:hover{background:var(--primary-light);color:var(--primary)}

/* Partial attendance tag */
.status-tag.partial{background:#fef3c7;color:#b45309}

/* FilterBar - 共用班種 Tab + 搜尋 */
.filter-bar-wrap{margin-bottom:16px}
.filter-bar-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.filter-bar-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.filter-tab{padding:7px 16px;border-radius:20px;border:1px solid var(--gray-200);background:#fff;font-size:14px;cursor:pointer;transition:.15s;color:var(--gray-600);white-space:nowrap}
.filter-tab:hover{border-color:var(--primary);color:var(--primary)}
.filter-tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-type-select{display:none;padding:8px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:14px;background:#fff;color:var(--gray-700);font-family:inherit;flex:1;min-width:0}
.filter-year-select{padding:4px 8px;border:1px solid var(--gray-200);border-radius:6px;font-size:12px;background:#fff}
.filter-bar-search{margin-bottom:8px}
.filter-search-input{width:100%;max-width:300px;padding:8px 12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;color:var(--gray-700);transition:.15s}
.filter-search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(14,165,233,.1)}
.filter-search-input::placeholder{color:var(--gray-400)}

/* Sidebar Collapsible Groups */
.sidebar-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 4px;border:none;background:none;cursor:pointer;font-size:11px;font-weight:600;color:var(--gray-400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.sidebar-group-toggle:hover{color:var(--gray-600)}
.sidebar-group-toggle .chevron{width:14px;height:14px;transition:transform .2s;flex-shrink:0}
.sidebar-group-toggle.collapsed .chevron{transform:rotate(-90deg)}
.sidebar-group-items{overflow:hidden;transition:max-height .25s ease;max-height:500px}
.sidebar-group-items.collapsed{max-height:0}

/* Loading Overlay */
.loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.6);z-index:150;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .2s}
.loading-overlay.show{opacity:1;pointer-events:auto}
.loading-spinner{width:36px;height:36px;border:3px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Leave type buttons */
.leave-type-btn{padding:8px 20px;border-radius:20px;border:1px solid var(--gray-200);background:#fff;font-size:14px;cursor:pointer;transition:.15s;color:var(--gray-600)}
.leave-type-btn:hover{border-color:var(--warning);color:var(--warning)}
.leave-type-btn.active-leave{background:var(--warning);color:#fff;border-color:var(--warning)}

/* Makeup badge */
.status-tag.makeup{background:#dbeafe;color:#2563eb;font-size:11px;padding:2px 8px;margin-left:2px}

/* Makeup button in checkin */
.check-btn.makeup-btn{background:#dbeafe;color:#2563eb;font-size:11px;padding:4px 8px;border-radius:12px}
.check-btn.makeup-btn:hover{background:#bfdbfe}
.check-btn.note-btn{background:var(--gray-100);color:var(--gray-500);font-size:11px;padding:4px 8px;border-radius:12px}
.check-btn.note-btn:hover{background:var(--primary-light);color:var(--primary)}
.check-btn.note-btn.has-note{background:#fef3c7;color:#d97706;font-weight:600}

/* Topic count badge */
.topic-count-badge{display:inline-block;padding:2px 8px;background:var(--primary-light);color:var(--primary);border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap}

/* Button active feedback */
.btn:active{transform:scale(.97);transition:transform .05s}

/* 按鈕 hover 加強 */
.btn { font-weight: 600; }
.btn-primary:hover { box-shadow: 0 2px 8px rgba(14,165,233,.3); transform: translateY(-1px); }
.btn-success:hover { box-shadow: 0 2px 8px rgba(16,185,129,.3); transform: translateY(-1px); }
.btn-danger:hover { box-shadow: 0 2px 8px rgba(239,68,68,.3); transform: translateY(-1px); }
/* 簽到按鈕加大 */
.check-btn { padding: 8px 18px; font-size: 15px; font-weight: 600; }

/* Class Button Grid (按鈕式選班) */
.class-button-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.class-card-btn {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 12px 16px 12px 20px;
  border: 2px solid var(--gray-200); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer; transition: all .15s;
  text-align: left; position: relative;
  font-family: inherit;
}
.class-card-btn::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--type-color, var(--gray-200));
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.class-card-btn:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.class-card-btn.selected {
  border-color: var(--primary); background: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(14,165,233,.2);
}
.class-card-name { font-size: 15px; font-weight: 600; color: var(--gray-800); }
.class-card-count { font-size: 13px; color: var(--gray-400); margin-top: 2px; }
.class-card-btn { min-height: 48px; }

/* Collapsible class groups */
.class-button-grid.grouped { display:flex; flex-direction:column; gap:6px; }
.class-group { border:1px solid var(--gray-200); border-radius:var(--radius-sm); overflow:hidden; }
.class-group.has-selected { border-color: var(--primary); }
.class-group-header {
  display:flex; align-items:center; gap:8px; width:100%; padding:10px 14px;
  border:none; background:#fff; cursor:pointer; font-family:inherit;
  position:relative; padding-left:18px;
}
.class-group-header::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background: var(--type-color, var(--gray-200));
}
.class-group-name { font-size:14px; font-weight:600; color:var(--gray-700); }
.class-group-meta { font-size:12px; color:var(--gray-400); margin-left:auto; }
.class-group-arrow {
  width:16px; height:16px; color:var(--gray-400);
  transition:transform .2s; flex-shrink:0;
}
.class-group:not(.expanded) .class-group-arrow { transform:rotate(-90deg); }
.class-group-body {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:6px; padding:0 8px 8px;
}
.class-group:not(.expanded) .class-group-body { display:none; }

/* ===== Checkin Toolbar ===== */
.checkin-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:nowrap}
.checkin-toolbar .class-dropdown{min-width:0;width:auto}
.checkin-search{flex:0 1 160px;min-width:80px}
.checkin-toolbar-actions{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
.checkin-toolbar-actions .btn-label{display:inline}
.checkin-summary-row{margin-bottom:8px}