/* ==========================================
   CLASSROOM INSTRUCTOR — New folder creation
   3 animation blocks. Reuses adding-students.css for shell,
   sidebar, tabs; reuses create-assignments.css for drawer,
   YN pills, sub-fields, submit button.

   Adds:
     - My Folders empty state with hint card + view toggle
     - Folder creation drawer art (folder + person)
     - Inline settings list (no master toggle — 6 toggles directly visible)
     - Sub-fields: Exclude threshold words, Exclude Phrases input + Add/Remove
     - New folder row appended to table after Submit
   ========================================== */

/* === My Folders header bar === */
.nf-mfhdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.nf-mfttl{font-size:13px;font-weight:700;color:#1a1a1a}
.nf-mfttl span{font-weight:600}
.nf-mfright{display:flex;align-items:center;gap:5px}
.nf-vt{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:default}
.nf-vt.tbl{background:#4285f4;color:#fff}
.nf-vt.fld{background:#eee;color:#666}
.nf-search{border:1px solid #ddd;border-radius:5px;padding:0 8px;font-size:8.5px;color:#aaa;background:#fff;width:170px;height:22px;display:flex;align-items:center}

/* === Empty hint card (shown when My Folders(0)) === */
.nf-hint{background:#fff;border-radius:6px;padding:8px;border:1px solid #eee;margin-bottom:8px}
.nf-hint-msg{border:1px solid #d6d6d6;border-radius:6px;padding:11px 14px;font-size:9.5px;color:#333;font-weight:500;line-height:1.5;text-align:center}
.nf-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px}
.nf-pg-btn{width:18px;height:18px;border:1px solid #ddd;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:9px;color:#888;background:#fff}

/* FAB highlight ring — emphasize the + button per screenshot 1 */
.mc-fab.fab-glow{box-shadow:0 0 0 3px rgba(228,67,67,.55),0 4px 12px rgba(228,67,67,.35)}

/* === Drawer art (folder + person, matches screenshot 2) === */
.nf-art{height:60px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;position:relative}
.nf-art svg{width:90px;height:60px}

/* === Inline 6-toggle list (no master toggle gate) === */
.nf-toggles{display:flex;flex-direction:column;gap:0;margin-top:2px}

/* Sub-field for threshold words === */
.mc-subfld.subfld-thresh{padding:5px 8px}
.mc-subfld.subfld-thresh .mc-subfld-inp{width:46px;justify-content:center}

/* Phrase sub-field has Add Phrases + per-phrase row + Remove === */
.mc-subfld.subfld-phrases .nf-phr-row{display:flex;align-items:center;gap:6px;width:100%}
.mc-subfld.subfld-phrases .mc-subfld-inp{flex:1;font-size:8.5px}
.nf-rm-btn{font-size:8.5px;background:#4285f4;color:#fff;padding:3px 9px;border-radius:4px;font-weight:600;cursor:default}

/* === Compare-databases default-yes pills already exist in create-assignments === */
/* nothing extra — relies on .db-default-yes & .mc-yn from create-assignments */

/* === New folder row that gets appended to table after creation === */
.nf-table{background:#fff;border-radius:6px;overflow:hidden;border:1px solid #eee;margin-top:6px}
.nf-thd{display:grid;grid-template-columns:0.8fr 1.4fr 1.2fr 0.7fr 0.9fr;background:#ecedef;color:#555;font-weight:600;font-size:8.5px;padding:7px 8px;gap:4px}
.nf-row{display:grid;grid-template-columns:0.8fr 1.4fr 1.2fr 0.7fr 0.9fr;font-size:8.5px;padding:7px 8px;gap:4px;border-bottom:1px solid #f3f3f3;background:#eef4ff;opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .4s ease}
.nf-row.on{opacity:1;transform:translateY(0)}
.nf-row .nf-fico{display:inline-block;width:9px;height:7px;background:#fbbf24;border-radius:1px 2px 2px 2px;margin-right:4px;vertical-align:middle}
.nf-row .nf-acts{display:flex;gap:3px}
.nf-row .nf-acts span{border:1px solid #ddd;border-radius:3px;padding:1px 5px;color:#888;font-size:8px;background:#fff}

/* Drawer width tuned for the new-folder form (a bit narrower than ca-drawer) === */
.mc-drawer.nf-drawer{width:50%;padding:10px 14px}

/* Section divider above Compare-against-databases === */
.nf-cmp-hd{font-size:10px;font-weight:700;color:#1a1a1a;margin-top:6px;padding-top:6px;border-top:1px solid #eee}

/* Email notification info dot === */
.nf-info-dot{display:inline-flex;align-items:center;justify-content:center;width:11px;height:11px;border-radius:50%;border:1px solid #bbb;font-size:7px;color:#888;font-weight:700;margin-left:3px;vertical-align:middle}

/* Pulse ring used on settings rows that get highlighted === */
.mc-set-row.hl{box-shadow:inset 3px 0 0 #4285f4}

/* === Floating tooltip (matches managing-submissions.css pattern) === */
.nf-tip{position:absolute;background:#1a1a1a;color:#fff;border-radius:5px;padding:4px 8px;font-size:9px;font-weight:500;box-shadow:0 4px 14px rgba(0,0,0,.22);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .2s ease,transform .2s ease,top .35s cubic-bezier(.4,0,.2,1),left .35s cubic-bezier(.4,0,.2,1);z-index:60;white-space:nowrap;line-height:1.3;max-width:190px}
.nf-tip.on{opacity:1;transform:translateY(0)}
.nf-tip::after{content:'';position:absolute;top:-4px;left:var(--arrow-x,12px);width:0;height:0;border:4px solid transparent;border-bottom-color:#1a1a1a;border-top:0}
.nf-tip.flip::after{top:auto;bottom:-4px;border-bottom:0;border-top:4px solid #1a1a1a}
.nf-tip .typed{display:inline-block;min-width:6px}

@media(max-width:640px){
  .mc-drawer.nf-drawer{width:80%}
  .nf-search{width:120px}
}