/* QUI3-28 Assignments panel (assignments-panel.js). Same card grammar as the
   home task cards: 16px radius, soft two-layer shadow, 11px uppercase labels. */

.asg-badge { display:inline-block; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; padding:2px 8px; border-radius:3px; background:#ede9fe; color:#5b21b6; border:1px solid #ddd6fe; vertical-align:middle; white-space:nowrap; }

/* Form toggle (create / edit / coder-assign) */
.asg-field { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; margin-bottom:10px; border:1.5px solid #e0e0e0; border-radius:4px; background:#faf9ff; }
.asg-field label.asg-toggle { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#212121; cursor:pointer; margin:0; }
.asg-field input[type=checkbox] { width:16px; height:16px; accent-color:#5b21b6; cursor:pointer; margin:0; }
.asg-field .asg-topic { flex:1; min-width:160px; padding:7px 10px; border:1.5px solid #e0e0e0; border-radius:4px; font-size:13px; font-family:inherit; box-sizing:border-box; }
.asg-field .asg-topic[disabled] { background:#f3f4f6; color:#9ca3af; }
.asg-field .asg-hint { flex-basis:100%; font-size:11px; color:#6b7280; line-height:1.45; }
.asg-field.asg-dark { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.14); }
.asg-field.asg-dark label.asg-toggle { color:#fff; }
.asg-field.asg-dark .asg-hint { color:rgba(255,255,255,0.55); }

/* Student home panel */
.asg-home { text-align:left; margin:2px 0 18px; padding:14px 16px; border:1.5px solid #ddd6fe; background:#faf9ff; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,0.05),0 6px 18px rgba(0,0,0,0.06); }
.asg-home-hd { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.asg-home-hd .asg-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#5b21b6; }
.asg-count { font-size:10px; font-weight:800; color:#5b21b6; background:#ede9fe; border-radius:999px; padding:2px 8px; line-height:1; }
.asg-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid #ede9fe; }
.asg-row:first-of-type { border-top:none; }
.asg-row-main { flex:1; min-width:0; }
.asg-row-title { font-weight:700; font-size:14px; line-height:1.3; color:#111; overflow:hidden; text-overflow:ellipsis; }
.asg-row-sub { font-size:12px; color:#6b7280; margin-top:2px; }
.asg-due { font-size:11px; font-weight:600; color:#555; white-space:nowrap; }
.asg-due.overdue { color:#e74c3c; font-weight:700; }
.asg-status { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.asg-status.pending { background:#f3f4f6; color:#374151; }
.asg-status.pending_approval { background:#fef3c7; color:#92400e; }
.asg-open { flex-shrink:0; background:rgba(37,99,235,0.12); color:#2563eb; border:1px solid rgba(37,99,235,0.28); padding:7px 12px; font-size:12px; font-weight:700; border-radius:10px; cursor:pointer; font-family:inherit; }

/* Admin view */
.asg-admin-hd { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.asg-admin-hd h3 { margin:0; }
.asg-admin-hd p { margin:4px 0 0; font-size:12.5px; color:#6b7280; max-width:560px; }
.asg-filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.asg-filters select { padding:7px 10px; border:1.5px solid #e0e0e0; border-radius:6px; font-size:12.5px; font-family:inherit; background:#fff; max-width:220px; }
.asg-summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.asg-stat { padding:10px 14px; border:1px solid #e5e7eb; border-radius:12px; background:#fff; min-width:110px; }
.asg-stat b { display:block; font-size:20px; color:#111; }
.asg-stat span { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b7280; }
.asg-table-wrap { overflow-x:auto; border:1px solid #e5e7eb; border-radius:12px; background:#fff; }
.asg-table { width:100%; border-collapse:collapse; font-size:13px; }
.asg-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#6b7280; padding:10px 12px; border-bottom:1px solid #e5e7eb; background:#fafafa; white-space:nowrap; }
.asg-table td { padding:10px 12px; border-bottom:1px solid #f1f1f4; vertical-align:top; }
.asg-table tr:last-child td { border-bottom:none; }
.asg-table .asg-user { font-weight:600; color:#111; }
.asg-table .asg-un { color:#9ca3af; font-size:11.5px; }
.asg-empty { text-align:center; color:#888; padding:30px 12px; font-size:13px; }
.asg-field.asg-dark .asg-topic { background:#1e1e1e; color:#fff; border-color:rgba(255,255,255,0.15); border-radius:10px; }
.asg-field.asg-dark .asg-topic[disabled] { background:#161616; color:rgba(255,255,255,0.35); }