/* style.css - basic styles for Class Calendar 3D */
.cc3d-root { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.cc3d-card { background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%); border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(2,6,23,0.08); transform-style: preserve-3d; transition: transform 0.18s ease; }
.cc3d-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.cc3d-header-left { display:flex; align-items:center; gap:12px; }
.cc3d-header button { background:transparent; border:1px solid #e6e6e6; padding:6px 10px; border-radius:8px; cursor:pointer; }
.cc3d-month { font-weight:600; }
.cc3d-weeknames { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; font-size:12px; color:#6b7280; margin-bottom:6px; }
.cc3d-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.cc3d-cell { min-height:88px; background:#fff; border-radius:12px; padding:8px; position:relative; box-shadow: inset 0 -1px 0 rgba(15,23,42,0.03); cursor:pointer; overflow:hidden; }
.cc3d-daynum { font-size:14px; font-weight:600; color:#374151; }
.cc3d-marker { position:absolute; top:8px; right:8px; background:#ecfdf5; color:#065f46; font-size:11px; padding:4px 6px; border-radius:999px; }
.cc3d-title { margin-top:8px; font-size:12px; color:#6b7280; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.cc3d-actions { display:flex; gap:8px; margin-top:12px; justify-content:flex-end; }
.cc3d-actions button { padding:8px 12px; border-radius:8px; border:1px solid #e5e7eb; background:white; cursor:pointer; }

.cc3d-panel { position:fixed; right:20px; top:80px; width:360px; max-width:calc(100% - 40px); background:white; border-radius:12px; box-shadow:0 20px 40px rgba(2,6,23,0.12); z-index:9999; padding:12px; }
.cc3d-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.cc3d-close { background:transparent; border:0; cursor:pointer; padding:6px 8px; border-radius:8px; }
.cc3d-panel-body label{ display:block; margin-top:8px; font-size:13px; color:#374151; }
.cc3d-input, .cc3d-textarea { width:100%; padding:8px; border:1px solid #e6e6e6; border-radius:8px; margin-top:6px; box-sizing:border-box; }
.cc3d-textarea { min-height:80px; resize:vertical; }
.cc3d-row { display:flex; gap:8px; margin-top:8px; }
.cc3d-row input { flex:1; }
.cc3d-row button { padding:8px 10px; border-radius:8px; cursor:pointer; border:1px solid #e5e7eb; background:#111827; color:white; }

.cc3d-att-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px dashed #f1f5f9; }
.cc3d-att-name { flex:1; }
.cc3d-present { background:#ecfdf5; color:#065f46; border:1px solid #d1fae5; padding:6px 10px; border-radius:8px; cursor:pointer; }
.cc3d-absent { background:#fff1f2; color:#be123c; border:1px solid #fecaca; padding:6px 10px; border-radius:8px; cursor:pointer; }

.cc3d-muted { color:#6b7280; font-size:13px; }

/* responsive */
@media(max-width:700px){
  .cc3d-card { padding:12px; }
  .cc3d-cell { min-height:72px; }
  .cc3d-panel { left:10px; right:10px; top:60px; width:auto; }
}